/* Fiyat Bot — yerleşim ve görsel sistem.
 * contrast: 60 çift, iki mod, tamamı geçiyor — 12 Ağustos 2026
 * responsive: 320/375/414/768 ölçüldü — yatay kaydırma yok
 * ==========================================================================
 * Token'lar: tokens.css. Bu dosyada HAM DEĞER YOK.
 *
 * Renk anlamları — her tonun tek işi var:
 *   indigo  → arayüz seninle konuşuyor (etkileşim, odak, etkinlik, cevap)
 *   yeşil   → iyi sonuç
 *   kırmızı → sorun
 *   amber   → temkin (belirsiz eşleşme)
 *   nötr    → zemin, metin ve BİLGİ (uyarı olmayan her şey)
 *
 * Anlam hiçbir yerde yalnız renge bırakılmıyor: en ucuz satırın kenarında
 * dik bir şerit var, grafikte dip nokta daha büyük ve tek etiketli, hedef
 * fiyat çizgisinin kimliğini kesikli deseni taşıyor.
 *
 * OPACITY BİR SÖNÜKLEŞTİRME ARACI DEĞİLDİR. Sönükleştirmeyi mürekkep
 * basamağı yapar (ink-0 → ink-1 → ink-2), saydamlık değil. Sebep ölçüm:
 * grup saydamlığı hem yazıyı hem zeminini arkadaki renge doğru yıkar, yani
 * kontrast göründüğünden çok daha hızlı çöker. Bu dosyada altı yerde
 * kullanılıyordu ve altısı da açık modda eşiğin altındaydı — en kötüsü
 * 2.14:1. Tek istisna `:disabled`: devre dışı denetimler WCAG 1.4.3'ün
 * dışında ve saydamlık orada "bu şey şu an çalışmıyor" demenin en kısa yolu.
 * ========================================================================= */

/* ==========================================================================
   Temel
   ========================================================================= */

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

html, body {
  /* clip, hidden DEĞİL: hidden bir kaydırma bağlamı yaratıyor ve içerideki
     position:sticky öğeleri sessizce kırıyor. */
  overflow-x: clip;
}

html { background: var(--color-paper-0); }

body {
  margin: 0;
  min-height: 100vh;
  /* Zemin BURADA değil, html'de. Arka plan ızgarası (.bg-grid) negatif
     z-index'te duruyor: boyama sırasında negatif katman kök zemininin
     ÜSTÜNDE ama blok zeminlerinin ALTINDA. body'ye donuk bir zemin verilirse
     ızgarayı tam olarak örter. html'in zemini duruyor, o yüzden JS kapalıyken
     veya canvas desteklenmediğinde sayfa yine paper-0. */
  background: transparent;
  color: var(--color-ink-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Kinetik arka plan ızgarası — çizim background.js'te, renkleri tokens.css'te.
   z-index: -1 kasten: kabuğu ve içindeki her şeyi konumlandırmak zorunda
   kalmadan hepsinin altına geçmenin tek yolu. Alternatifi .shell'e
   position:relative vermekti; o da mutlak konumlu torunların kapsayıcı
   bloğunu viewport'tan kabuğa taşıyıp .sr-only'nin sabitlemesini bozardı.

   fixed + inset:0 — ızgara sayfayla birlikte KAYMAZ. Kayan bir arka plan
   40 satırlık bir tabloda gözü içerikten çalıyor. */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

h1, h2, h3, h4, strong {
  color: var(--color-ink-0);
  font-family: var(--font-display);
  font-style: normal;          /* italik başlık yok */
}

a { color: var(--color-accent); text-underline-offset: 2px; }

/* Çıplak `button` etiketine GÖRÜNÜM VERİLMEZ. Tarihçe: birincil düğme
   eskiden çıplak `button` seçicisiyle tanımlıydı ve
   `button:hover:not(:disabled)` özgüllüğü (0,2,1) yalın sınıf
   seçicilerini (0,1,1) yeniyordu — sekmeler hover'da dolu aksan olup
   okunmaz hale geliyordu. Rail öğeleri de <button> olduğu için o tuzak
   burada geri gelirdi. Kökten kaldırıldı: birincil düğme .btn sınıfı.
   Bunu geri koyma. */
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Sayı taşıyan her şey mono ve tabular: fiyat sütunları rakam rakam
   hizalanmazsa göz iki fiyatı karşılaştıramaz. Bu tablonun tek işi o. */
.num, .stat__value, .watch-price, .pill, .plan code, .site-status code,
.chart-axis, .chart-point-label, .chart-tip strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Odak: 2px halka, 2px kaydırma. Yalnızca klavyeyle gezerken görünür.
   ASLA animasyonlanmaz — odakta anında görünmeli.

   Burada `border-radius` VERİLMEZ. Eskiden veriliyordu ve halkayı değil
   ÖĞENİN KENDİSİNİ değiştiriyordu: rail öğesi odaklanınca 10px'ten 8px'e,
   tema düğmesi 7px'ten 8px'e atlıyordu — klavyeyle gezerken köşeler
   oynuyordu. Gereksizdi de: outline zaten öğenin kendi yarıçapını izliyor. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hidden { display: none !important; }

/* Yalnızca ekran okuyucu için. top/left AÇIKÇA sıfırlanıyor — sebebi
   ölçülerek bulundu: konumlandırılmış bir ata yoksa mutlak konumun
   kapsayıcı bloğu VIEWPORT olur ve öğe statik konumunda kalır. Tablo
   başlığındaki bu 1px'lik kutu 634px'te takılıyor, hem .table-scroll'un
   hem .panel'in kırpmasından KAÇIYOR (overflow:hidden mutlak konumlu
   torunu kapsayıcı bloğu dışarıdaysa kırpmaz) ve sayfayı 320px'te yatay
   kaydırılır hale getiriyordu. 0,0'a sabitlenince hiçbir zaman taşmaz. */
.sr-only {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Kabuk ve sol rail
   ========================================================================= */

.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0;
  max-width: 1240px;
  margin: var(--space-lg) auto;
  min-height: calc(100vh - var(--space-2xl));
  /* CAM. Taban paper-1 değil paper-0 — gerekçe tokens.css'teki "Cam
     yüzeyler" notunda; kısası: canvas'ın zemini de paper-0, yani ana
     sütunun altındaki renk değişmiyor ve oradaki hiçbir kontrast çifti
     kaymıyor. backdrop-filter DENENDİ VE KALDIRILDI (aynı not). */
  background: var(--surface-shell);
  border: var(--rule-soft);
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-shell);
  /* clip, hidden DEĞİL: hidden bir kaydırma bağlamı yaratır ve içerideki
     position:sticky'yi sessizce öldürür — rail o an yapışmayı bırakır.
     clip aynı kırpmayı yapar, kaydırma bağlamı yaratmaz. */
  overflow: clip;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  /* İki tonluluk (rail ≠ ana sütun) camda TERSİNE kuruluyor: eskiden ana
     sütun kabuğun üstüne paper-0 sürüyordu, şimdi kabuğun kendisi paper-0
     ve fark rail'e sürülen ince paper-1 yıkamasıyla veriliyor. Ana sütun
     böylece camın tamamını görüyor — ızgaranın en çok göründüğü yer orası
     ve orada bir tablo yoksa ekranın yarısı boş duruyor. */
  background: var(--surface-rail);
  /* Tema anahtarı rail'in dibinde. Tablo uzun olduğunda sayfa kayıyor ve
     rail sabit değilse hem gezinme hem tema anahtarı ekrandan çıkıyordu.
     align-self: start şart — esnetilmiş bir grid çocuğunun kayacak yeri
     olmadığı için sticky çalışmaz. */
  position: sticky;
  top: var(--space-lg);
  align-self: start;
  height: calc(100vh - var(--space-2xl));
  overflow-y: auto;
}

/* Bu artık bir <h1>. Tarayıcının başlık boşluğu ve punto varsayılanı
   buradaki değerlerle eziliyor — görünüş <div> hâliyle birebir aynı. */
.rail__brand {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  color: var(--color-ink-0);
}
.rail__mark { width: 22px; height: 22px; flex: none; }
.rail__mark .bar { fill: var(--color-ink-3); }
/* En kısa çubuk vurgulu: "hangisi ucuz" bu arayüzün tek sorusu. */
.rail__mark .bar--low { fill: var(--color-accent); }

.rail__nav { display: flex; flex-direction: column; gap: 2px; }

.rail__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-item);
  background: transparent;
  color: var(--color-ink-1);
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: left;
  /* Sekme geçişinde HAREKET YOK: günde onlarca kez tıklanan bir kontrolde
     hareket arayüzü hızlandırmaz, yavaşlatır. Yalnızca renk yumuşuyor. */
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* Tıklanabilir metin iki satıra düşmez. 320px'te rail yatay bir şeride
   dönüşüyor ve "Takip listesi" orada ikiye bölünüyordu — kırık bir arayüz
   gibi okunuyor. Ölçüldü: iki sekme yan yana nowrap'la 242px tutuyor,
   288px'lik içerik genişliğine sığıyor. */
.rail__label { flex: 1; white-space: nowrap; }
.rail__item .glyph { width: 15px; height: 15px; flex: none; opacity: 0.85; }

@media (hover: hover) and (pointer: fine) {
  .rail__item:hover { background: var(--color-paper-2); color: var(--color-ink-0); }
}
.rail__item:active { background: var(--color-paper-3); }
.rail__item[aria-selected="true"] {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: 500;
}
.rail__item[aria-selected="true"] .glyph { opacity: 1; }
.rail__item:disabled { opacity: 0.5; cursor: not-allowed; }

.rail__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rail__link {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Tıklanabilir metin iki satıra düşmez (ölçüldü: 320px). Dar ekranda
     rail'in alt satırı sarsın, bu bağlantı sarmasın. */
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .rail__link:hover { color: var(--color-accent); }
}

/* Eklenti köprüsü göstergesi. Nokta ".dot" ile aynı dili konuşuyor
   (tablo/zamanlayıcı durumları); metin ink-2, yani rail'in ikincil basamağı. */
.rail__ajan {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.rail__ajan .satir { display: flex; gap: var(--space-2xs); align-items: center; }
.rail__ajan button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  justify-self: start;
}
@media (hover: hover) and (pointer: fine) {
  .rail__ajan button:hover { color: var(--color-accent); }
}
/* Eşleştirme kodu ELLE taşınıyor (ekrandan eklentiye): tek aralıklı yazı ve
   seçilebilir olması şart, karıştırılan karakter "çalışmıyor" diye okunur. */
.rail__ajan code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-0);
  background: var(--color-paper-2);
  border: var(--rule-hair);
  border-radius: var(--radius-input);
  padding: 2px 6px;
  user-select: all;
}

/* Oturum satırı: kim girmiş + çıkış. Kapı kapalıyken (yerel kullanım)
   gizli duruyor, bkz. index.html. */
.rail__oturum {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  display: flex;
  gap: var(--space-2xs);
  align-items: baseline;
  flex-wrap: wrap;
}
.rail__oturum .eposta {
  /* Uzun e-posta rail'i genişletmesin; kırpılıp tam hâli title'da durur. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.rail__oturum button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .rail__oturum button:hover { color: var(--color-accent); }
}

/* -- Tema anahtarı (segmentli) ------------------------------------------- */
.seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: var(--rule-hair);
  border-radius: var(--radius-item);
  background: var(--color-paper-0);
}
.seg__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) 2px;
  border: 0;
  border-radius: calc(var(--radius-item) - 3px);
  background: transparent;
  color: var(--color-ink-2);
  font-size: 10px;
  letter-spacing: 0.02em;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.seg__btn .glyph { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .seg__btn:hover { background: var(--color-paper-2); color: var(--color-ink-0); }
}
.seg__btn[aria-checked="true"] {
  background: var(--color-paper-2);
  color: var(--color-ink-0);
  font-weight: 500;
}
.seg__btn:focus-visible { outline-offset: -1px; }

/* ==========================================================================
   Ana sütun
   ========================================================================= */

.main {
  min-width: 0;                /* grid çocuğu: içerik taşmasın diye şart */
  padding: var(--space-lg) var(--space-xl) var(--space-lg);
  /* Zemin YOK: kabuğun camı zaten paper-0 tonunda ve ana sütunun eski
     rengi buydu. Buraya donuk bir paper-0 koymak camı ikinci kez kapatır. */
  background: transparent;
  /* Dikey ayırıcı rail'de DEĞİL burada: rail artık yapışkan ve viewport
     yüksekliğinde, kenarlığı onun üstünde bıraksak sayfa uzadığında yarıda
     kesilirdi. Kabuğun zemini zaten rail rengi (paper-1). */
  border-left: var(--rule-hair);
  display: flex;
  flex-direction: column;
}

.topbar { margin-bottom: var(--space-lg); }
.topbar__sub {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Girdi ve düğmeler — sekiz durum
   ========================================================================= */

form { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

input[type="text"], input[type="number"] {
  padding: 10px 12px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink-0);
  background: var(--color-paper-1);
  border: var(--rule-soft);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
/* Placeholder ink-2: ink-3 ölçüldü ve gövde metni eşiğini geçmiyor (3.70:1). */
input::placeholder { color: var(--color-ink-2); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  input[type="text"]:hover, input[type="number"]:hover { border-color: var(--color-ink-3); }
}
input:focus-visible { border-color: var(--color-accent); }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input[aria-invalid="true"] { border-color: var(--color-bad); }

#q { flex: 1; min-width: 220px; }
#trackQuery { flex: 1; min-width: 220px; }
#trackTarget { width: 180px; }
/* Hedef fiyat kutuları sayı taşıyor. */
#trackTarget, .watch-actions input, .track-row input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.watch-actions input, .track-row input {
  padding: 5px 9px; width: 128px; font-size: var(--text-sm);
}

/* -- Etiketli arama çubuğu ------------------------------------------------
   Sorgu artık parçalardan kuruluyor: her Enter yazılanı bir etikete çevirir,
   taramaya giden metin etiketlerin boşlukla birleşimi. Sunucu tarafı aynı
   düz sorgu dizesini görüyor — boru hattında hiçbir şey değişmedi.

   Renkler token'dan: kabuğun aksanı üzerine kurulu bir yonga ailesi.
   Aşağıdaki .chip'ten (site durumu) KASTEN ayrı bir sınıf: .chip durum
   bildirir ve renkle konuşur (iyi/kötü/bekliyor), .tag ise kullanıcının
   yazdığı veri. İkisini tek sınıfta toplamak, tarama sürerken sorgunun
   parçalarını durum rozeti gibi gösterirdi. */

.tagbar__list {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
/* Etiket yokken çubuk altında ölü boşluk bırakma. */
.tagbar__list:empty { display: none; }

.tagbar__hint {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
/* Sınıra dayanmak bir hata değil, bir kısıt — bad değil warn. */
.tagbar__hint[data-state="limit"] { color: var(--color-warn); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* Sağda 3px: X düğmesi kendi yuvarlak vurgusunu taşıyor, ona nefes payı. */
  padding: 3px 3px 3px 10px;
  font-size: var(--text-sm);
  color: var(--color-ink-0);
  background: var(--color-accent-tint);
  border: 1px solid color-mix(in oklch, var(--color-accent) 28%, transparent);
  border-radius: var(--radius-item);
  animation: tag-in var(--dur-slow) var(--ease-spring) both;
}
/* Çıkış: JS önce diziden siler, sonra bu sınıfı verip animasyonun bitmesini
   bekler. Öğe DOM'da kaldığı sürece dizinle eşleşmesin diye kimlik dizide
   tutuluyor, konumda değil. */
.tag[data-leaving] { animation: tag-out var(--dur-mid) var(--ease-in) both; pointer-events: none; }

@keyframes tag-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.85); filter: blur(var(--blur-tag)); }
}
@keyframes tag-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.85); filter: blur(var(--blur-tag)); }
}

.tag__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px; flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-1);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tag__x svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) {
  .tag__x:hover {
    background: color-mix(in oklch, var(--color-accent) 20%, transparent);
    color: var(--color-ink-0);
    transform: scale(1.1);
  }
}
.tag__x:active { transform: scale(0.9); }

/* Girdinin kendi mikro tepkisi. transform-origin sol: büyürken "Ara"
   düğmesini itmesin, çubuk sola çapalı kalsın. */
#q {
  transform-origin: left center;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  #q:hover:not(:disabled) { transform: scale(1.01); }
}
#q:active:not(:disabled) { transform: scale(0.99); }

/* -- Birincil ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 10px 18px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-input);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  font-size: var(--text-base);
  white-space: nowrap;         /* tıklanabilir metin iki satıra düşmez */
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) {
    background: var(--color-focus);
    border-color: var(--color-focus);
  }
}
/* Basılınca hafif küçülme: arayüzün dokunuşu duyduğunun anlık kanıtı.
   Yasak olan hover'da KULLANICIYA DOĞRU büyümek; bu ters yönde. */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[data-state="loading"] { cursor: progress; }
/* Arama düğmesi tarama sürerken TIKLANABİLİR (etiketi "Durdur" oluyor), bu
   yüzden bekleme imleci değil işaretçi. Genişliği de sabitleniyor: "Ara" ile
   "Durdur" arasında gidip gelirken girdinin boyu oynamasın. */
#goBtn { min-width: 7.25rem; }
#goBtn[data-state="loading"] {
  cursor: pointer;
  /* Renk de değişiyor: aksan mavisi bu arayüzde "başlat/onayla" demek.
     Aynı yerde duran ikinci eylemi (kes) aynı renkte bırakmak, iki zıt işi
     tek renkle söylemek olurdu. Kırmızı burada "hata" değil "durdur" —
     .btn[data-state="error"] ile aynı boya, farklı cümle.
     Ölçüldü: --color-on-accent metni --color-bad üzerinde açık temada
     6.44:1, koyu temada 7.57:1 (hover'da 7.73 / 8.64) — hepsi AA'nın
     üstünde, mavi haldeki düğmeden daha da rahat. */
  background: var(--color-bad);
  border-color: var(--color-bad);
}
/* Hover, .btn'in kendi yönünü izliyor: açık temada koyulaş, koyu temada
   açıl. --color-focus'a (mavi) düşmesin diye id ile eziliyor. */
@media (hover: hover) and (pointer: fine) {
  #goBtn[data-state="loading"]:hover {
    background: color-mix(in oklch, var(--color-bad) 86%, var(--color-ink-0));
    border-color: color-mix(in oklch, var(--color-bad) 86%, var(--color-ink-0));
  }
}
.btn[data-state="loading"]::before {
  content: "";
  width: 12px; height: 12px; flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[data-state="error"] { background: var(--color-bad); border-color: var(--color-bad); }
.btn[data-state="success"] { background: var(--color-good); border-color: var(--color-good); }

/* -- İkincil ------------------------------------------------------------- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 5px 10px;
  border: var(--rule-soft);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--color-ink-1);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-tint);
  }
  .btn-ghost.danger:hover:not(:disabled) {
    border-color: var(--color-bad);
    color: var(--color-bad);
    background: transparent;
  }
}
.btn-ghost:active:not(:disabled) { transform: scale(0.97); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
/* Sessiz başarı: kutlama bildirimi yok, düğme kendi durumunu söylüyor.
   Devre dışıyken de okunur kalması için opacity'yi geri alıyoruz — yoksa
   "✓ Takibe alındı" yarı saydam kalıp kayboluyor. */
.btn-ghost[data-state="loading"] { cursor: progress; }
.btn-ghost[data-state="success"] {
  opacity: 1; border-color: var(--color-good); color: var(--color-good);
}
.btn-ghost[data-state="error"] {
  opacity: 1; border-color: var(--color-bad); color: var(--color-bad);
}

/* -- 👍/👎 ---------------------------------------------------------------- */
.btn-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;          /* .sr-only'yi kendi içine bağla */
  padding: 5px 9px;
  border: var(--rule-soft);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--color-ink-2);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn-vote .glyph { width: 15px; height: 15px; display: block; }
/* Aynı yol, 180° döndürülmüş: iki ayrı çizim tutmaya gerek yok. */
.btn-vote.down .glyph { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .btn-vote:hover:not(:disabled) {
    border-color: var(--color-good);
    color: var(--color-good);
    background: var(--color-paper-2);
  }
  .btn-vote.down:hover:not(:disabled) {
    border-color: var(--color-bad);
    color: var(--color-bad);
  }
}
.btn-vote:active:not(:disabled) { transform: scale(0.97); }
.btn-vote:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Stat satırı — dördü de taramanın GERÇEKTEN ürettiği değerler
   ========================================================================= */

.statrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.stat {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-1);
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  min-width: 0;
}

/* Cevap kutusu. Tablonun tek işi "hangisi" sorusuna cevap vermek; bu da
   o cevabın kendisi, o yüzden kenarda dik bir aksan şeridi taşıyor. */
.stat--answer {
  background: var(--color-accent-tint);
  border-color: color-mix(in oklch, var(--color-accent) 30%, transparent);
  box-shadow: inset 2px 0 0 0 var(--color-accent);
}
.stat--answer .stat__value { color: var(--color-accent); }

.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.stat__value {
  margin-top: 2px;
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink-0);
  overflow-wrap: anywhere;
}
.stat__note {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}
.stat__note:empty { display: none; }

/* ==========================================================================
   Tarama ilerlemesi
   ========================================================================= */

.progress {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  align-items: center; margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}
.chip {
  padding: 3px 9px;
  border-radius: var(--radius-item);
  border: var(--rule-hair);
  background: var(--color-paper-1);
  color: var(--color-ink-2);
  transition: border-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}
/* "Bekleniyor" durumu SAYDAMLIKLA anlatılmıyor. Ölçüldü: opacity .55 bu
   rozeti açık modda 2.14:1'e düşürüyordu — yani tarama sürerken ekrandaki
   EN OKUNMAZ şey, o an beklediğin sitenin adıydı. Beklemeyi zaten adın
   yanındaki "…" ve kenarlığın sönük kalması söylüyor. */
.chip.pending { border-style: dashed; }
.chip.ok {
  border-color: color-mix(in oklch, var(--color-good) 45%, transparent);
  color: var(--color-good);
  background: color-mix(in oklch, var(--color-good) 10%, transparent);
}
/* DİKKAT: bu değiştirici "empty" ADINDA OLAMAZ. Aşağıdaki .empty kuralı
   ("sonuç bulunamadı" kutusu) büyük bir padding veriyor ve .chip.empty ona
   da tutuyordu — durum rozetleri dev ovaller çıkıyordu. */
.chip.neutral { border-color: var(--color-ink-3); color: var(--color-ink-0); }
.chip.fail {
  border-color: color-mix(in oklch, var(--color-bad) 45%, transparent);
  color: var(--color-bad);
  background: color-mix(in oklch, var(--color-bad) 10%, transparent);
}

.plan {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: baseline;
}
.plan code {
  background: var(--color-paper-1);
  border: var(--rule-hair);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--color-ink-0);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
/* Buradaki metin zaten ink-2 (.plan'dan miras). Üstüne bir de saydamlık
   bindirmek onu 3.85:1'e düşürüyordu; ikinci bir sönükleştirme katmanına
   gerek yok. */
.plan-note { color: var(--color-ink-2); }

/* ==========================================================================
   Özet — detay satırı (asıl cevap stat satırında)
   ========================================================================= */

.summary {
  background: var(--color-paper-1);
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}
.summary .meta { color: var(--color-ink-2); }
.summary .meta a { font-weight: 500; }

.track-row {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: var(--rule-hair);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.track-row label { display: flex; align-items: center; gap: var(--space-2xs); }
.track-row .tracked { color: var(--color-good); font-weight: 500; }

/* ==========================================================================
   Sonuç tablosu
   ========================================================================= */

.panel {
  /* relative: içindeki mutlak konumlu torunların kapsayıcı bloğu burası
     olsun, viewport değil — yukarıdaki .sr-only notuna bak. */
  position: relative;
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  background: var(--color-paper-1);
  overflow: hidden;
}

.toolbar {
  display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.toolbar label { display: flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.toolbar input[type="checkbox"] { accent-color: var(--color-accent); }
.counts { margin-left: auto; }

/* Tablo kendi kabında kayar; sayfa gövdesi kaymaz. */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td {
  padding: 9px 12px; text-align: left;
  border-bottom: var(--rule-hair);
}
th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; white-space: nowrap; }
/* Tablo satırları KASTEN yuvarlatılmıyor — 40 satırlık bir listede her
   satırın yuvarlatılması dikey taramayı bozar. Kabuk yuvarlak, defter düz. */

@media (hover: hover) and (pointer: fine) {
  tbody tr:hover { background: var(--color-paper-2); }
}

/* Cevap satırı: kenardaki dik aksan çizgisi + hafif tint, muhasebe
   defterlerindeki gibi. "en ucuz" anlamını yanındaki rozet de taşıyor,
   yani renk tek kanal değil. */
tr.cheapest { background: var(--color-accent-tint); }
tr.cheapest td:first-child { box-shadow: inset 2px 0 0 0 var(--color-accent); }
tr.cheapest td:nth-child(5) strong { color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  tbody tr.cheapest:hover {
    background: color-mix(in oklch, var(--color-accent) 12%, var(--color-paper-1));
  }
}

/* Stokta olmayan satır. Bu satırlar yalnızca kullanıcı "stokta olmayanları
   göster" kutusunu İŞARETLEDİĞİNDE çiziliyor — yani görmeyi bilerek istedi.
   Eski hâli `opacity: .45` idi ve ölçüldüğünde açık modda 2.36:1 çıkıyordu:
   kullanıcının açıkça istediği satır okunamıyordu. Sönükleştirmeyi artık
   mürekkep basamağı yapıyor (ink-2, 4.93:1); "stokta yok" bilgisini zaten
   kırmızı rozet taşıyor, yani anlam renge de saydamlığa da bırakılmış
   değil. */
tr.oos td { color: var(--color-ink-2); }
tr.oos .title a { color: var(--color-ink-2); }
tr.suspicious td { color: var(--color-ink-2); }

.title a { color: var(--color-ink-0); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .title a:hover { color: var(--color-accent); text-decoration: underline; }
}
/* Satıcı adı ve eşleşme notu her zaman kendi satırında dursun; yoksa site
   adıyla birleşip "TeknosaVEGAS TEKNOLOJİ" gibi okunuyor. */
td small {
  display: block; color: var(--color-ink-2);
  font-size: var(--text-xs); margin-top: 2px;
}

/* Üçüncü taraf satıcı bir UYARI değil, bir BİLGİ: "bunu sitenin kendisi
   satmıyor". Renkli olduğunda tabloda onlarca satırda yanıp asıl uyarıları
   bastırıyordu. Nötr metin + noktalı alt çizgi "üstüne gelirsen detay var"
   diyor — zaten title'ı da o. */
.seller-3p {
  text-decoration: underline dotted var(--color-ink-3);
  text-underline-offset: 3px; cursor: help;
}
/* "Kargo ücretli ama tutarı bilinmiyor": toplam EKSİK hesaplandı. Bu bir
   belirsizlik değil, bir hata payı — okuduğun sayı yanlış. */
.ship-unknown { color: var(--color-bad); }

.vote { white-space: nowrap; }
.vote button + button { margin-left: var(--space-2xs); }

/* ==========================================================================
   Rozetler — varsayılan NÖTR (sözlük: app.js badgeTone)
   "Teşhir" iyi haber değil, bir kayıt. "Sıfır" da öyle.
   ========================================================================= */

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-item);
  font-size: var(--text-xs);
  font-weight: 500;
  margin: 2px 4px 2px 0;
  background: var(--color-paper-2);
  color: var(--color-ink-1);
  border: 1px solid transparent;
}
.badge.good {
  background: color-mix(in oklch, var(--color-good) 12%, transparent);
  color: var(--color-good);
}
.badge.bad {
  background: color-mix(in oklch, var(--color-bad) 12%, transparent);
  color: var(--color-bad);
}
/* Şüpheli = temkin. Kendi tonu var ama bir kademe yumuşak: dolgu yerine
   yalnızca kenarlık. */
.badge.warn { background: transparent; color: var(--color-warn); border-color: var(--color-warn); }

/* ==========================================================================
   Site durumları / boş durum
   ========================================================================= */

.site-status {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  background: var(--color-paper-1);
  padding: var(--space-sm) var(--space-md);
}
.site-status .row { display: flex; gap: var(--space-xs); padding: 2px 0; flex-wrap: wrap; }
.site-status .err { color: var(--color-bad); }
.site-status code {
  background: var(--color-paper-2); border: var(--rule-hair);
  border-radius: 6px; padding: 0 5px; font-size: var(--text-xs);
}
/* Saydamlık kaldırıldı (3.34:1 idi): kapsayıcı zaten ink-2, bu sınıfın
   ayrıca sönükleştirmesi gerekmiyor. */
.site-status .muted { color: var(--color-ink-2); }

.empty {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  color: var(--color-ink-2);
  border: 1px dashed var(--color-ink-3);
  border-radius: var(--radius-card);
}

/* ==========================================================================
   Alt bilgi
   ========================================================================= */

.foot {
  margin-top: auto;
  padding-top: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.foot-row {
  display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap;
}
.foot-row:empty { display: none; }
.foot-row .err { color: var(--color-bad); }

/* ==========================================================================
   Takip listesi
   ========================================================================= */

.sched {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  background: var(--color-paper-1);
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
/* opacity: .8 kaldırıldı — ink-2'yi 3.31:1'e düşürüyordu. */
.sched small { color: var(--color-ink-2); }
.dot { width: 7px; height: 7px; border-radius: var(--radius-pill); display: inline-block; flex: none; }
.dot.on { background: var(--color-good); }
.dot.off { background: var(--color-ink-3); }
/* Etkinlik = arayüz çalışıyor = aksan. */
.dot.busy { background: var(--color-accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

#trackForm { margin-bottom: var(--space-md); }

.watch-card {
  background: var(--color-paper-1);
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin-bottom: var(--space-xs);
}
/* Duraklatılmış takip kartı. `opacity: .55` gövdeyi 2.93:1'e, başlığı
   3.98:1'e düşürüyordu — duraklatmak kartı okunmaz yapmak demek değil.
   Durumu artık kesik kenarlık ve kartın kendi "duraklatıldı" rozeti
   söylüyor; metin tam kontrastta kalıyor. */
.watch-card.paused { border-style: dashed; }
/* Giriş animasyonu YALNIZCA ilk kez görülen karta. Liste her dakika
   tazelendiği için tüm kartları her seferinde uçurmak rahatsız edici olurdu. */
.watch-card.enter { animation: card-in var(--dur-mid) var(--ease-out) both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(6px); }
}
/* Başlık artık bir düğme (detay panelini açar). Düğme görünümü sıfırlanıyor;
   kart başlığı bir kart başlığı gibi görünmeye devam etsin. */
.watch-head {
  display: flex; gap: var(--space-md); align-items: baseline; flex-wrap: wrap;
  width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
/* Halkanın kendisi global `:focus-visible` kuralından geliyor; burada
   yalnızca aralık açılıyor — başlık kartın tüm genişliğini kapladığı için
   2px'te halka kart kenarlığına yapışıyor. */
.watch-head:focus-visible { outline-offset: 4px; }
/* Ok, açıkken 90° döner. `align-self: center` değil `baseline`: ok başlık
   metninin hizasında dursun. */
.watch-caret { display: flex; color: var(--color-ink-2); }
.watch-caret svg {
  width: 14px; height: 14px;
  transition: rotate var(--dur-fast) var(--ease-out);
}
.watch-head[aria-expanded="true"] .watch-caret svg { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) {
  .watch-head:hover .watch-caret { color: var(--color-accent); }
}

/* Detay paneli — kart İÇİNDE açılır, modal yok. */
.watch-detail {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--rule-soft);
  animation: card-in 220ms var(--ease-out) both;
}
/* Grafik artık panelin İÇİNDE: kendi giriş animasyonu kalkıyor, yoksa iki
   kutu üst üste uçuyor. Hareket tek: panelin kendisi. */
.watch-detail .chart-card { margin: 0 0 var(--space-sm); animation: none; }
/* Tablo kart içinde sınırsız uzamasın; 30 teklif bir kartı ekran boyu yapar. */
.watch-detail .table-scroll { max-height: 340px; overflow-y: auto; }
.detail-note {
  color: var(--color-ink-2); font-size: var(--text-xs);
  margin-bottom: var(--space-2xs);
}
.watch-detail .detail-note:last-child {
  margin: var(--space-2xs) 0 0;
}
.watch-title { flex: 1; min-width: 180px; }
.watch-title strong {
  font-size: var(--text-md); font-weight: 600; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.watch-price { text-align: right; white-space: nowrap; }
.watch-price strong { font-size: var(--text-lg); font-weight: 500; }
.watch-price small, .watch-card small {
  display: block; color: var(--color-ink-2);
  font-size: var(--text-xs); font-family: var(--font-body);
}
.watch-meta { color: var(--color-ink-2); font-size: var(--text-xs); margin-top: var(--space-2xs); }
.watch-actions {
  display: flex; gap: var(--space-2xs); align-items: center; flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.pill {
  display: inline-block; min-width: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  border: var(--rule-hair);
  color: var(--color-ink-2);
  font-size: 10px; line-height: 16px; text-align: center;
}
.pill:empty { display: none; }
.rail__item[aria-selected="true"] .pill {
  background: var(--color-paper-0);
  color: var(--color-accent);
}

/* ==========================================================================
   Fiyat geçmişi grafiği
   Renkler CSS'ten gelir; chart.js hiçbir renk bilmez. Tema anahtarı
   değiştiğinde grafik JS çalışmadan yeniden boyanır.
   ========================================================================= */

.chart-card {
  background: var(--color-paper-1);
  border: var(--rule-hair);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
}
.watch-card .chart-card {
  margin: var(--space-sm) 0 0;
  background: var(--color-paper-0);
  animation: card-in 220ms var(--ease-out) both;
}
.chart-head {
  display: flex; align-items: baseline; gap: var(--space-xs);
  flex-wrap: wrap; margin-bottom: var(--space-xs); font-size: var(--text-sm);
}
.chart-note { color: var(--color-ink-2); font-size: var(--text-xs); }
.chart-empty { color: var(--color-ink-2); font-size: var(--text-sm); padding: var(--space-md) 0; }

.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

.chart-grid { stroke: color-mix(in oklch, var(--color-ink-0) 8%, transparent); stroke-width: 1; }
.chart-axis { fill: var(--color-ink-2); font-size: 11px; }
.chart-area { fill: var(--chart-fill); stroke: none; }
.chart-line {
  fill: none; stroke: var(--chart-line); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
/* Yüzey rengiyle halka: çizgi noktanın altından geçtiğinde iki işaret
   birbirine yapışmasın. */
.chart-dot { fill: var(--chart-line); stroke: var(--color-paper-1); stroke-width: 2; }
/* En düşük nokta yeşil. Kimlik hiçbir zaman yalnız renge bırakılmıyor: bu
   nokta AYRICA daha büyük (chart.js r=5, diğerleri r=4) ve tek doğrudan
   etiketli nokta. Yarıçapı buradan verme — chart.js veriyor. */
.chart-dot.min { fill: var(--chart-min); }
.chart-target { stroke: var(--chart-ref); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* Etiket veri rengini giymez — kimliği yanındaki kesikli çizgi taşıyor. */
.chart-target-label { fill: var(--color-ink-2); font-size: 11px; font-weight: 500; }
.chart-point-label { fill: var(--color-ink-2); font-size: 11px; }
.chart-point-label.strong { fill: var(--color-ink-0); font-weight: 500; font-size: 12px; }

/* İmleç ve nokta yalnızca girip çıkarken yumuşuyor; konumları anında
   güncelleniyor — konumu da geçişe bağlamak imleci geriden takip ettirir. */
.chart-cross, .chart-hover { transition: opacity 125ms var(--ease-out); }
.chart-cross { stroke: var(--color-ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-hover { fill: var(--chart-line); stroke: var(--color-paper-1); stroke-width: 2; }
.chart-cross.off, .chart-hover.off { opacity: 0; }
.chart-hit { fill: transparent; cursor: crosshair; }

/* Takip kartının içindeki grafiğin zemini paper-0; nokta halkası kendi
   zeminiyle aynı renkte olmazsa halka bir gri daire olarak görünüyor. */
.watch-card .chart-card .chart-dot,
.watch-card .chart-card .chart-hover { stroke: var(--color-paper-0); }

.chart-tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: var(--color-paper-1);
  border: var(--rule-soft);
  border-radius: var(--radius-input);
  padding: 6px 10px;
  font-size: var(--text-xs); line-height: 1.45;
  /* nowrap DEĞİL. İpucu imlecin x'ine göre konumlanıyor ve konum kabın
     içine kırpılıyor, ama ipucunun KENDİ genişliği kırpılmıyordu: dar bir
     ekranda 200px'lik bir ipucu sayfayı yatay kaydırılır hale getiriyordu.
     max-content genişlik sığdığı sürece tek satırda tutuyor, sığmadığında
     sarıyor. */
  width: max-content;
  max-width: min(260px, calc(100% - 16px));
  box-shadow: var(--shadow-pop);
  transform: translate(8px, -100%) scale(1);
  transform-origin: bottom left;
  transition: opacity 125ms var(--ease-out), scale 125ms var(--ease-out);
}
.chart-tip.flip { transform: translate(calc(-100% - 8px), -100%); transform-origin: bottom right; }
/* scale(0)'dan değil: gerçek dünyada hiçbir şey yoktan belirmiyor. */
.chart-tip.off { opacity: 0; scale: 0.97; }
.chart-tip strong { display: block; font-size: var(--text-sm); font-weight: 500; }
.chart-tip span { display: block; color: var(--color-ink-2); font-family: var(--font-body); }

/* ==========================================================================
   Duyarlı yerleşim — 320 / 375 / 414 / 768px'te doğrulandı
   ========================================================================= */

@media (max-width: 1000px) {
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .rail {
    /* Dar ekranda rail yatay bir şeride dönüşüyor — yapışkanlık kalkar,
       yoksa viewport yüksekliği kadar yer kaplardı. */
    position: static;
    height: auto;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-rail);
    border-bottom: var(--rule-hair);
  }
  .main { border-left: 0; }
  .rail__nav { flex-direction: row; flex: 1; gap: var(--space-2xs); }
  .rail__foot { margin-top: 0; flex-direction: row; align-items: center; gap: var(--space-sm); }
  .seg { width: 168px; }
  .main { padding: var(--space-md); }
}

@media (max-width: 560px) {
  .statrow { grid-template-columns: minmax(0, 1fr); }
  .rail__brand { width: 100%; }
  .rail__nav { flex: 1 1 100%; }
  .rail__foot { flex: 1 1 100%; justify-content: space-between; }
  .toolbar { gap: var(--space-xs); }
  .counts { margin-left: 0; flex: 1 1 100%; }
  .main { padding: var(--space-sm); }
  #trackTarget { width: 100%; }
  .watch-price { text-align: left; }
  /* Girdi tek başına bir satıra düştüğünde düğme yanında yetim kalıyordu;
     satırı doldursun. */
  #searchForm .btn, #trackForm .btn { flex: 1; }
}

/* ==========================================================================
   Hareket duyarlılığı: yer değiştirme kalkar, renk ve saydamlık kalır.
   Kırılma değil, kısıtlama.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .watch-card.enter, .watch-card .chart-card, .watch-detail { animation: none; }
  /* Ok yine döner (yer değiştirme değil, durum bildirimi) ama anında. */
  .watch-caret svg { transition: none; }
  .btn:active:not(:disabled),
  .btn-ghost:active:not(:disabled),
  .btn-vote:active:not(:disabled) { transform: none; }
  .chart-tip.off { scale: 1; }
  .dot.busy { animation: none; opacity: 0.6; }
  .btn[data-state="loading"]::before { animation-duration: 2s; }
  /* Etiket belirir/kaybolur ama uçmaz ve bulanmaz. DİKKAT: çıkışta
     `animation: none` demek animationend'in HİÇ ateşlenmemesi demek —
     app.js bu yüzden temizliği zamanlayıcıyla da güvenceye alıyor;
     burada öğe zaten anında görünmez oluyor. */
  .tag { animation: none; }
  .tag[data-leaving] { display: none; }
  .tag__x:hover, .tag__x:active,
  #q:hover:not(:disabled), #q:active:not(:disabled) { transform: none; }
}