/* ════════════════════════════════════════════════════════════════════
   VINCREO — FILTRE CUBUGU (tek dil)
   Her filtre barli sayfaya, sayfanin KENDI <style> blogundan ONCE:
       <link rel="stylesheet" href="/vincreo.css"/>
       <link rel="stylesheet" href="/filters.css"/>

   NEDEN: 2026-09 kullanim testinde her sayfanin filtre seridi ayri bir
   dil konusuyordu -- alti farkli punto (10.5 / 11 / 11.5 / 12 / 13.5),
   dort farkli kose yaricapi (2 / 3 / 5 / 6 px), ve "bu filtre acik"
   bilgisi bir sayfada altin dolgu, digerinde yesil cerceve, ucuncusunde
   hicbir sey. Ayni is icin ayri gorunum ogrenmeyi pahalilastiriyordu.

   ── OLCEK ───────────────────────────────────────────────────────────
   Iki basamak, ikisi de /vincreo.css'teki kanonik tip olceginden:
       etiket   --fs-label (11px)  buyuk harf, .08em
       kontrol  --fs-body  (13px)  select / input / dugme
   Filtre seridinde ucuncu bir punto YOK. Yeni kontrol eklerken bu iki
   degerin disina cikma.

   ── RENK SOZLESMESI ─────────────────────────────────────────────────
   ALTIN (--gold) = "bu filtre ACIK", yani sonucu daraltiyor.
     · segment dugmesi acik  -> altin DOLGU + #0b0c0c yazi
     · select / input  acik  -> altin CERCEVE + altin yazi (dolgu yok)
     · ac/kapa dugmesi acik  -> altin CERCEVE + altin yazi
   Yesil/kirmizi filtre seridinde DURUM bildirmez; yon bildiren veri
   renkleridir ve tabloda/grafikte kalir. "All" secili olmak filtrenin
   KAPALI olmasidir -- altin gostermez.

   ── SINIF ADI: .on ve .active ───────────────────────────────────────
   Sayfalar tarihsel olarak ikisini de kullaniyor (rs-rating .active,
   industry-rotation .on). Ikisi de burada tanimli; JS'e dokunmadan
   ayni gorunum cikiyor. Yeni is .on kullansin.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --fb-bg:var(--surface2);
  --fb-pad-y:7px;
  --fb-pad-x:9px;
  --fb-radius:4px;
  --fb-fs-label:var(--fs-label);
  --fb-fs-ctl:var(--fs-body);
}

/* ── KAP ────────────────────────────────────────────────────────────
   Serit sayfa genisligine yapisir; kart degil. Ust kenar yok, alt
   kenar var: ustundeki baslik seridiyle tek blok gibi okunsun. */
.toolbar{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
  padding:0 6px; background:var(--fb-bg);
  border-bottom:1px solid var(--border);
  font-family:var(--sans);
}

/* ── GRUP: etiket + kontrol(ler) ──────────────────────────────────
   Etiket kontrolun SOLUNDA, ayni satirda. Gruplar arasi ayrim ince
   dikey cizgi; ayri bir <div> ayirici KULLANILMAZ. */
.fgrp{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  padding:var(--fb-pad-y) var(--fb-pad-x);
  border-right:1px solid var(--border);
}
.fgrp:last-child{ border-right:none; }

.flabel{
  font-family:var(--sans); font-size:var(--fb-fs-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}

/* Bir grup icinde birden fazla kontrol (select + "Custom…" kutusu gibi) */
.fctl{ display:flex; align-items:center; gap:6px; }

/* ── SELECT / INPUT ──────────────────────────────────────────────── */
select.finp, input.finp{
  background:var(--surface); border:1px solid var(--border2); color:var(--bright);
  padding:4px 9px; border-radius:var(--fb-radius);
  font-size:var(--fb-fs-ctl); font-family:var(--sans);
  min-width:104px; outline:none;
}
select.finp:focus, input.finp:focus{ border-color:var(--gold); }
input.finp[type=number]{ width:80px; min-width:0; }
/* Esik secili (All degil) -> altin cerceve + altin yazi */
select.finp.on, select.finp.active,
input.finp.on,  input.finp.active{ border-color:var(--gold); color:var(--gold); }

/* ── SEGMENT (All | Bull | Bear gibi tek secimlik grup) ──────────── */
.seg{
  display:flex; border:1px solid var(--border2);
  border-radius:var(--fb-radius); overflow:hidden;
}
.seg button{
  background:transparent; border:none; border-right:1px solid var(--border2);
  color:var(--dim); font-family:var(--sans); font-size:var(--fb-fs-ctl);
  font-weight:600; padding:var(--fb-pad-y) var(--fb-pad-x);
  cursor:pointer; letter-spacing:.04em; transition:.15s;
}
.seg button:last-child{ border-right:none; }
.seg button:hover{ color:var(--bright); }
.seg button.on, .seg button.active{ background:var(--gold); color:#0b0c0c; }

/* ── DUGME (ac/kapa ya da eylem) ─────────────────────────────────
   .fbtn yeni ad. Sayfalarin kendi .btn tanimlari kaldirildikca burasi
   devraliyor; ikisi de ayni gorunumu versin diye .btn de listede. */
.fbtn, .toolbar .btn{
  background:var(--surface); border:1px solid var(--border2); color:var(--txt);
  padding:var(--fb-pad-y) var(--fb-pad-x); border-radius:var(--fb-radius);
  font-family:var(--sans); font-size:var(--fb-fs-ctl); font-weight:600;
  letter-spacing:.04em; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.fbtn:hover, .toolbar .btn:hover{ border-color:var(--gold); color:var(--bright); }
/* ACIK ac/kapa filtresi: cerceve + yazi altin, dolgu yok.
   (Segmentte dolgu var cunku orada "hangisi" sorusu var; burada
   "acik mi" sorusu var -- daha hafif bir isaret yetiyor.) */
.fbtn.on, .fbtn.active,
.toolbar .btn.on, .toolbar .btn.active{
  border-color:var(--gold); color:var(--gold);
}
.fbtn:disabled, .toolbar .btn:disabled{ opacity:.35; cursor:not-allowed; }
.fbtn:disabled:hover, .toolbar .btn:disabled:hover{
  border-color:var(--border2); color:var(--txt);
}

/* ── YARDIMCILAR ────────────────────────────────────────────────── */
.fgrow{ flex:1 1 auto; }               /* sagdakileri saga iter */
.fcount{                                /* "18 / 18 matched" */
  font-family:var(--mono); font-size:var(--fb-fs-label);
  color:var(--dim); white-space:nowrap; letter-spacing:.04em;
}
.fcount b{ color:var(--bright); }
.flegend{                               /* renk anahtari */
  display:flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:var(--fb-fs-label);
  color:var(--dim); letter-spacing:.04em; flex-wrap:wrap;
}
.flegend i{
  width:14px; height:10px; border-radius:2px;
  display:inline-block; vertical-align:middle;
}

/* ── ESKI SINIF ADLARI (scatter.html) ───────────────────────────
   O sayfanin filtre seridi ayri bir sozcuk dagarcigiyla yazilmis ve
   serit uc kez elle kopyalanmis (momentum / cyclical / digital).
   Markup'i ortak adlara cevirmek yerine adlari BURADA esliyoruz:
   degerler tek yerde kaliyor, kayma imkani yok.
   YENI SAYFA BU ADLARI KULLANMASIN. scatter'in markup'i bir gun
   sadelesirse bu blok tumden silinir. */
.controls-bar{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
  padding:0 6px; background:var(--fb-bg);
  border-bottom:1px solid var(--border);
  font-family:var(--sans);
}
.ctrl-group{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  padding:var(--fb-pad-y) var(--fb-pad-x);
  border-right:1px solid var(--border);
}
/* Ayirmayi .ctrl-group'un sag kenari yapiyor (diger sayfalardaki gibi);
   ayri ayirici elemani birakmak cift cizgi uretiyordu. */
.ctrl-sep{ display:none; }
.ctrl-label{
  font-family:var(--sans); font-size:var(--fb-fs-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}
.filter-wrap{ display:flex; align-items:center; gap:6px; }
.filter-select, .axis-select, .filter-input, .rally-input{
  background:var(--surface); border:1px solid var(--border2); color:var(--bright);
  padding:4px 9px; border-radius:var(--fb-radius);
  font-size:var(--fb-fs-ctl); font-family:var(--sans); outline:none;
}
.filter-select, .axis-select{ min-width:104px; }
.filter-input, .rally-input{ width:80px; text-align:left; }
.filter-select:focus, .axis-select:focus,
.filter-input:focus, .rally-input:focus{ border-color:var(--gold); }
/* Tek secimlik dugmeler: .seg sarmalayicisi yok, kendi cerceveleri var;
   secili olunca ayni altin DOLGU ("hangisi" sorusuna dolgu cevap verir). */
.quad-btn, .rally-btn, .rally-clr{
  background:transparent; border:1px solid var(--border2);
  border-radius:var(--fb-radius); color:var(--dim);
  font-family:var(--sans); font-size:var(--fb-fs-ctl); font-weight:600;
  padding:var(--fb-pad-y) var(--fb-pad-x);
  cursor:pointer; letter-spacing:.04em; transition:.15s;
}
.rally-clr{ padding:var(--fb-pad-y) 9px; }
.quad-btn:hover, .rally-btn:hover, .rally-clr:hover{ color:var(--bright); }
.quad-btn.on, .quad-btn.active,
.rally-btn.on, .rally-btn.active{
  background:var(--gold); color:#0b0c0c; border-color:var(--gold);
}
.rally-dash{ color:var(--dim); font-size:var(--fb-fs-ctl); }

/* ── DAR EKRAN ──────────────────────────────────────────────────
   Serit sarmaya devam eder; yalnizca kontrol genisligi kisilir ki
   iki grup yan yana sigsin. Punto DEGISMEZ -- olcek tek. */
@media (max-width:768px){
  .fgrp{ padding:6px 10px; }
  select.finp, input.finp{ min-width:88px; }
}