/* =========================================================
   PriceONN v2 · ana sayfa widget'ları (docs/ANA-SAYFA-WIDGETLAR.md)
   Ortak kabuk (.wgx) + 11 veri widget'ı. home.css'ten sonra yüklenir; aynı tokenlar, aynı panel dili (.pn).
   İç düzen kapsayıcı sorgusuyla (container query) widget'ın kendi genişliğine göre değişir: aynı widget
   masaüstünde 4, 6 ya da 8 sütun, tablette yarım, telefonda tam genişlikte olabilir.
   Hareket: yalnız transform ve opacity (home.css "HAREKET DİLİ"); renk değişimi anlıktır.
   ========================================================= */
:root{
  /* Isı haritası renk ölçeği: taban yüzey, 3 kademe karışım oranı, en güçlü kademenin halka rengi.
     Oranlar temaya göre değişir; renk tokenları (--up / --down) olduğu gibi kullanılır, böylece
     "yükseliş kırmızı" tercihi (.updown-swap) ısı haritasında da geçerli kalır. */
  --hm-base:var(--bg-surface);
  --hm-m1:12%; --hm-m2:30%; --hm-m3:55%; --hm-mr:80%;
  /* Korelasyon ölçeği tema tokenlarından gelir (sabit renk kodu yok): artı ilişki forex mavisi, eksi ilişki enerji
     turuncusu. Aydınlık, karanlık ve "sistem karanlık" temalarında kendiliğinden doğru değeri alır. */
  --cr-pos:var(--asset-forex); --cr-neg:var(--asset-energy);
  --calc-out:linear-gradient(180deg,rgba(31,111,178,.07),rgba(31,111,178,.03));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--hm-m1:16%; --hm-m2:36%; --hm-m3:54%; --hm-mr:88%}
}
:root[data-theme="dark"]{
  --hm-base:#0f1420;
  --hm-m1:16%; --hm-m2:36%; --hm-m3:54%; --hm-mr:88%;
  --calc-out:linear-gradient(180deg,rgba(77,163,230,.10),rgba(77,163,230,.04));
}

/* ---------- kabuk ---------- */
.wgx{container-type:inline-size}
.wg-h{align-items:flex-start;flex-wrap:nowrap;padding:12px 12px 10px 16px}
.wg-tt{flex:1;min-width:0}
.wg-q{margin:2px 0 0 42px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.wg-act{align-self:center}
.wg-fold{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px -4px -6px 0;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);cursor:pointer}
.wg-fold svg{transition:transform 240ms var(--m-out)}
.wg-fold[aria-expanded="false"] svg{transform:rotate(180deg)}
@media (max-width:599px){.wg-fold{display:inline-flex}}
.wgx.is-folded>.wg-b,.wgx.is-folded>.wg-f,.wgx.is-folded>.wg-tabs,.wgx.is-folded>.wg-err{display:none}
.wgx.is-folded>.wg-h{border-bottom:0}
.wg-b{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;transition:opacity 200ms var(--m-soft)}
/* yenilenirken önceki içerik soluk kalır (iskelet sıçraması yok) */
.wgx.is-busy>.wg-b{opacity:.55}
.wgx.is-busy>.wg-h .pn-ic{animation:wg-busy 1s var(--m-inout) infinite alternate}
@keyframes wg-busy{from{opacity:1}to{opacity:.45}}
.wg-err{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:8px 10px;border-radius:8px;background:var(--warn-tint);color:var(--text-secondary);font-size:.75rem;line-height:1rem}
.wg-err svg{color:var(--warn)}
.wg-f{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:auto}
.wg-f>span{min-width:0}
.wg-asof time{font-family:var(--font-num)}
.wg-disc{font-style:italic}
/* sekme/seçici şeridi (başlığın altında) */
.wg-tabs{display:flex;gap:2px;flex:none;padding:4px 8px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.wg-tabs::-webkit-scrollbar{display:none}
.wg-tabs[data-ov]{--ov-a:#000;--ov-b:#000;-webkit-mask-image:linear-gradient(90deg,var(--ov-a),#000 28px,#000 calc(100% - 28px),var(--ov-b));mask-image:linear-gradient(90deg,var(--ov-a),#000 28px,#000 calc(100% - 28px),var(--ov-b))}
.wg-tabs[data-ov="end"],.wg-tabs[data-ov="both"]{--ov-b:transparent}
.wg-tabs[data-ov="start"],.wg-tabs[data-ov="both"]{--ov-a:transparent}
.wg-tabs button{position:relative;flex:none;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.wg-tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:1px;background:var(--onn-2);transform:scaleX(0);transition:transform var(--t-mid) var(--ease)}
.wg-tabs button:hover{color:var(--text-primary)}
.wg-tabs button[aria-selected="true"],.wg-tabs button[aria-checked="true"]{color:var(--text-primary);font-weight:600}
.wg-tabs button[aria-selected="true"]::after,.wg-tabs button[aria-checked="true"]::after{transform:scaleX(1)}
/* satır bağlantılarında ortak hover ışıması (home.css kart diliyle aynı) */
.mv-row,.vl-row{position:relative}
.mv-row::after,.vl-row::after,.hm-t::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--onn-2) 55%,transparent);transition:opacity 240ms var(--m-out)}
@media (hover:hover) and (pointer:fine){.mv-row:hover::after,.vl-row:hover::after,.hm-t:hover::after{opacity:1}}
.hm-t:focus-visible::after{opacity:1}
/* değer değişince kısa, yönlü vurgu (satır ya da kutu): opaklığı sönen katman */
.wg-flash{position:relative}
.wg-flash::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:var(--m-glow-up)}
.wg-flash.m-dn::before{background:var(--m-glow-down)}

/* =========================================================
   1. Günün hareketlileri: tek sıralı liste, sabit 10 slot (kart yüksekliği sekmeden bağımsız),
   sıfır eksenli ıraksak çubuk (yükselen sağa, düşen sola), eski veri satırı gri ve çubuksuz
   ========================================================= */
.wg-movers{--mv-row:58px;--mv-sep:9px}
.mv-list{list-style:none;margin:0;padding:6px 8px 0;height:calc(var(--slots,10) * var(--mv-row) + var(--mv-sep) + 6px);overflow:hidden;flex:none}
.mv-r{height:var(--mv-row)}
.mv-r+.mv-r .mv-row{border-top:1px solid var(--line);border-radius:0}
.mv-row{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(64px,30%) 7.5em;align-items:center;gap:12px;height:100%;padding:0 8px;border-radius:10px;color:var(--text-primary);text-decoration:none}
.mv-row .am,.mv-row .am-c{width:28px;height:28px}
.mv-row .am-pair .am-c{width:20px;height:20px}
.mv-id{display:flex;flex-direction:column;min-width:0}
.mv-id b{font-size:.875rem;line-height:1.25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-nm{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-bar{position:relative;height:8px;border-radius:4px;background:var(--chip-bg)}
.mv-bar::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--text-tertiary);opacity:.6}
.mv-bar i{position:absolute;top:0;bottom:0;width:50%;border-radius:4px;transition:transform 600ms var(--m-inout)}
.mv-pos{left:50%;transform-origin:left;background:linear-gradient(90deg,color-mix(in srgb,var(--up) 45%,transparent),var(--up))}
.mv-neg{right:50%;transform-origin:right;background:linear-gradient(270deg,color-mix(in srgb,var(--down) 45%,transparent),var(--down))}
.mv-px{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.mv-px>.num{font:600 .875rem/1.25rem var(--font-num);white-space:nowrap}
.mv-px .chg{font-size:.75rem;line-height:1rem}
.mv-old{justify-self:center;font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mv-stale .mv-id b,.mv-stale .mv-px>.num{color:var(--text-secondary);font-weight:500}
.mv-stale .am{filter:grayscale(1);opacity:.7}
/* ayraç: tam genişlik ince çizgi (en yüksek 5 ile en düşük 5 arası) */
.mv-sep{height:var(--mv-sep);display:flex;align-items:center;padding:0 8px}
.mv-sep::before{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--text-tertiary) 55%,transparent)}
.mv-sep+.mv-r .mv-row{border-top:0}
.mv-note{padding:12px 8px 0;font-size:.875rem;line-height:1.25rem;color:var(--text-secondary)}
@container (max-width:420px){.mv-row{grid-template-columns:28px minmax(0,1fr) 56px 6.5em;gap:8px}}
.mv-cls{flex:none;margin-top:auto;padding:10px 16px 12px;border-top:1px solid var(--line)}
.mv-cls-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.mv-cls-h>span:first-child{font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mv-cls-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mv-cls-l li{flex:1 1 96px;display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--bg-surface);min-width:0}
.mv-cls-n{font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-secondary)}
.mv-cls-l .chg{font-size:.875rem}
.mv-cls-b{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}

/* =========================================================
   2. Isı haritası
   Üç karar birlikte okunurluğu kurar:
     a) kutular TEK TİP; önem sırası kutu boyuyla değil SIRALAMA ile verilir (ağırlığı yüksek sembol başta).
        Farklı boyutlu kutular ızgarada alanı tam dolduramadığı için yamalı duruyordu.
     b) YÜZDE birincil mürekkeptir, sembol ikincil
     c) her varlık sınıfı kendi kuşağında durur, kuşak başlığı grubun ortalamasını kendi renginde taşır
   Renk tek başına anlam taşımaz: ok + işaretli değer her kutuda yazar, erişilebilir ad tam cümledir.
   ========================================================= */
.hm-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:12px 16px 12px}
.hm-verdict{display:flex;align-items:baseline;gap:8px;margin:0;min-width:0;flex:0 1 auto}
.hm-vn{font:700 2rem/1 var(--font-num);letter-spacing:-.02em;color:var(--text-primary)}
.hm-vn.up{color:var(--up)}
.hm-vn.down{color:var(--down)}
.hm-vp{font-size:1.125rem;font-weight:600}
.hm-vt{font-size:.875rem;line-height:1.25rem;color:var(--text-secondary)}
.hm-bw{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:6px}
.hm-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--chip-bg)}
.hm-bar i{display:block;min-width:0;flex-basis:0;transition:flex-grow 700ms var(--m-inout)}
.hm-bu{background:var(--up)}
.hm-bd{background:var(--down)}
.hm-bf{background:var(--border-control)}
.hm-bt{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;font-size:.75rem;line-height:1rem;color:var(--text-secondary)}
.hm-bt b{font-family:var(--font-num);font-weight:700;color:var(--text-primary)}

/* ---- kuşaklar ---- */
/* ---- ağaç haritası (Market\Widgets\Treemap): yerleşim sunucuda, yüzde cinsinden ----
   Kutular mutlak konumludur (--x, --y, --w, --h yüzde); aralarında 2 px boşluk. Kart kendi genişliğine göre üç
   yerleşimden birini gösterir (geniş, orta, dar). Her kutu en az ~60 x 44 px: ad + işaretli değer her kutuda yazar. */
.hm-maps{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:0 14px 8px}
.hm-map{position:relative;flex:1 1 auto;min-width:0;display:none}
.hm-wide{min-height:420px}
.hm-mid{min-height:460px}
.hm-tall{height:620px;flex:none}
/* Kart genişliğine göre yerleşim (Treemap::BOXES ile aynı eşikler): kutular hiçbir genişlikte sınırın altına inmez. */
@container (min-width:620px){.hm-wide{display:block}}
@container (min-width:440px) and (max-width:619.98px){.hm-mid{display:block}}
@container (max-width:439.98px){.hm-tall{display:block}}
.hm-map>.hm-t,.hm-map>.hm-gh{position:absolute;left:calc(var(--x) * 1% + 1px);top:calc(var(--y) * 1% + 1px);width:calc(var(--w) * 1% - 2px);height:calc(var(--h) * 1% - 2px)}
.hm-gh{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:0 2px;font-size:.75rem;line-height:1rem;overflow:hidden;container-type:inline-size}
/* Dar sınıf başlığında önce sınıf adı sığar: "ort." kelimesi, sonra ortalamanın kendisi düşer (kutuların title'ında kalır). */
@container (max-width:200px){.hm-avg-l{display:none}.hm-gn{letter-spacing:.04em}}
@container (max-width:150px){.hm-avg{display:none}}
.hm-gn{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-avg{flex:none;margin-left:auto;padding:1px 7px;border-radius:999px;font:600 .75rem/1rem var(--font-num);color:var(--text-primary);background:var(--hm-c,var(--chip-bg))}
.hm-t{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;
  padding:4px 7px;border-radius:5px;background:var(--hm-c,var(--chip-bg));color:var(--text-primary);text-decoration:none;
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--hm-ring,transparent)}
.hm-s{font:600 .75rem/1rem var(--font-sans,inherit);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-v{display:flex;align-items:baseline;gap:3px;font:700 .8125rem/1.125rem var(--font-num);letter-spacing:-.01em;white-space:nowrap}
.hm-ar{font-size:.75rem;line-height:1}
.hm-px{display:none;font:400 .75rem/1rem var(--font-num);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
/* Kutu kademeleri (Treemap başvuru boyuna göre): k0 dar, k2 fiyat satırlı, k3 büyük. */
.hm-k0{padding:3px 5px}
.hm-k0 .hm-v{font-size:.75rem;line-height:1rem}
.hm-k2 .hm-px,.hm-k3 .hm-px{display:block}
.hm-k2 .hm-s{font-size:.8125rem}
.hm-k3{padding:8px 10px;gap:2px}
.hm-k3 .hm-s{font-size:.875rem;line-height:1.25rem}
.hm-k3 .hm-v{font-size:1.125rem;line-height:1.5rem}
/* "+N diğer": sınıfın toplanan kuyruğu (piyasalar sayfasında o sınıf); kesik çerçeve, ortalama renginde. */
.hm-rest{align-items:center;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-tertiary) 45%,transparent);background:color-mix(in srgb,var(--hm-c,var(--chip-bg)) 70%,var(--bg-surface))}
.hm-rest .hm-s{font:700 .875rem/1.25rem var(--font-num)}
.hm-rn{font-size:.75rem;line-height:1rem;color:var(--text-secondary)}

/* ---- 7 renk sınıfı (-3..+3) ---- */
.hb0,.hm-sw .hb0{--hm-c:var(--chip-bg)}
.hb1{--hm-c:color-mix(in srgb,var(--up) var(--hm-m1),var(--hm-base))}
.hb2{--hm-c:color-mix(in srgb,var(--up) var(--hm-m2),var(--hm-base))}
.hb3{--hm-c:color-mix(in srgb,var(--up) var(--hm-m3),var(--hm-base));--hm-ring:color-mix(in srgb,var(--up) var(--hm-mr),var(--hm-base))}
.hb-1{--hm-c:color-mix(in srgb,var(--down) var(--hm-m1),var(--hm-base))}
.hb-2{--hm-c:color-mix(in srgb,var(--down) var(--hm-m2),var(--hm-base))}
.hb-3{--hm-c:color-mix(in srgb,var(--down) var(--hm-m3),var(--hm-base));--hm-ring:color-mix(in srgb,var(--down) var(--hm-mr),var(--hm-base))}

/* ---- gösterge: hem renk hem boy açıklanır ---- */
.hm-leg{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:0 16px 12px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.hm-lg{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.hm-lc{flex:1 1 14rem;min-width:0}
.hm-lt{font-family:var(--font-num)}
.hm-sw{display:inline-flex;gap:2px}
.hm-sw i{display:block;width:18px;height:10px;border-radius:2px;background:var(--hm-c,var(--chip-bg))}
@media (hover:hover) and (pointer:fine){.hm-t{transition:transform 160ms var(--m-out)}.hm-t:hover{transform:translateY(-1px)}}

/* Telefonda üst özet sıkışır. */
@media (max-width:699px){
  .hm-top{gap:10px 16px}
  .hm-vn{font-size:1.75rem}
}

/* Eşit boy (masaüstü): topluluk ve ısı haritası aynı satırda yarım sütundur ve satırın boyuna uzar; ısı haritasının
   ağaç haritası kalan alanı doldurur (yerleşim yüzde cinsinden), topluluk kartının içi de esner. Böylece ikisinin
   altı aynı hizada biter, kısa kartın altında boşluk kalmaz. */
@media (min-width:1100px){
  .wgrid>.wg-community,.wgrid>.wg-heatmap{align-self:stretch}
}

/* =========================================================
   3-4. Hesaplayıcılar
   ========================================================= */
.calc{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;flex:1}
.calc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px}
.calc .fld{gap:4px;min-width:0}
.calc .fld>label{font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-secondary)}
.calc-inp,.calc-sel{min-height:44px;height:44px;border-radius:10px;background:var(--bg-canvas);min-width:0}
.calc-inp{font:600 1rem/1.5rem var(--font-num)}
.calc-sel{padding-right:8px;font-size:.875rem}
.fx-in{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
.fx-in .fx-amt{grid-column:1/-1}
.calc-swap{align-self:end;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--chip-bg);color:var(--text-secondary);cursor:pointer;transition:transform 240ms var(--m-out)}
.calc-swap:hover{color:var(--text-primary)}
.calc-swap:active{transform:rotate(180deg)}
.calc-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;background:var(--chip-bg);border:1px solid var(--line)}
.calc-side button{font-family:var(--font-sans);gap:6px}
.calc-side small{font-size:.75rem;color:var(--text-tertiary);font-weight:500}
.calc-out{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:12px 14px;border-radius:12px;background:var(--calc-out);border:1px solid var(--line);min-width:0}
.calc-big{font:700 1.875rem/2.25rem var(--font-num);letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
.calc-out small{font:600 .875rem/1.25rem var(--font-sans);color:var(--text-tertiary)}
.calc-eq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.calc-eq li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--bg-surface);min-width:0}
.calc-eq span{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-eq b{font:600 .875rem/1.25rem var(--font-num);overflow-wrap:anywhere}
.fx-rates{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.25rem;margin-top:auto}
.fx-rates th,.fx-rates td{padding:6px 4px;text-align:right;border-top:1px solid var(--line)}
.fx-rates thead th{border-top:0;font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-tertiary)}
.fx-rates th:first-child{text-align:left}
.fx-rates tbody th{font:600 .875rem/1.25rem var(--font-num)}
.fx-rates td{font-family:var(--font-num)}
.calc-note{margin:0;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.calc .invalid .calc-inp,.calc-inp[aria-invalid="true"]{border-color:var(--down)}

/* =========================================================
   5. Gram altın makası
   ========================================================= */
.gs{display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;flex:1}
.gs-lead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0}
.gs-big{font:700 1.875rem/2.25rem var(--font-num);letter-spacing:-.02em}
.gs-tl{font:600 .875rem/1.25rem var(--font-num);color:var(--text-secondary)}
.gs-verdict{margin:-4px 0 0;font-size:.875rem;line-height:1.25rem;color:var(--text-secondary)}
.gs-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gs-dl dt{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.gs-dl dd{margin:2px 0 0;font:600 .875rem/1.25rem var(--font-num);white-space:nowrap}
.gs-ch{display:flex;flex-direction:column;flex:1;min-height:96px;margin:0}
.gs-plot{position:relative;flex:1;min-height:64px;margin-left:16px}
.gs-ch svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.gs-z{position:absolute;left:-16px;margin-top:-8px;font:500 .75rem/1rem var(--font-num);color:var(--text-tertiary)}
.gs-zero{stroke:var(--text-tertiary);stroke-width:1;opacity:.45}
.gs-line{fill:none;stroke:var(--onn-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gs-dot{position:absolute;right:-4px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--onn-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--onn-2) 22%,transparent);transition:transform 600ms var(--m-inout)}
.gs-hits{position:absolute;inset:0}
.gs-hits i{position:absolute;top:0;bottom:0;width:24px;margin-left:-12px;cursor:default}
.gs-ax{display:flex;justify-content:space-between;margin:4px 0 0 16px;font:500 .75rem/1rem var(--font-num);color:var(--text-tertiary)}
.gs-ch figcaption{margin-top:6px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.gs-ch figcaption .num{color:var(--text-secondary)}

/* =========================================================
   6. Oynaklık
   ========================================================= */
.vl-list{list-style:none;margin:0;padding:4px 8px 8px;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.vl-list li+li .vl-row{border-top:1px solid var(--line);border-radius:0}
.vl-row{display:grid;grid-template-columns:16px minmax(64px,1fr) minmax(48px,1.1fr) auto;grid-template-areas:"rk id bar v" "rk td td m";align-items:center;gap:4px 10px;padding:8px;border-radius:10px;color:var(--text-primary);text-decoration:none}
.vl-rk{grid-area:rk;align-self:start;padding-top:2px;font-size:.75rem;color:var(--text-tertiary)}
.vl-id{grid-area:id;display:flex;flex-direction:column;min-width:0}
.vl-id b{font-size:.875rem;line-height:1.25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-id small{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap}
.vl-bar{grid-area:bar;position:relative;height:6px;border-radius:3px;background:var(--chip-bg);overflow:hidden}
.vl-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--onn-3) 55%,transparent),var(--onn-2));transform-origin:left;transition:transform 700ms var(--m-inout)}
.vl-v{grid-area:v;font:700 .875rem/1.25rem var(--font-num);text-align:right;min-width:4.5em}
.vl-today{grid-area:td;font-size:.75rem;line-height:1rem;color:var(--text-secondary)}
.vl-today b{color:var(--text-primary)}
.vl-meter{grid-area:m;position:relative;justify-self:end;width:4.5em;height:4px;border-radius:2px;background:var(--chip-bg);overflow-x:clip;overflow-clip-margin:4px}
.vl-meter::before{content:"";position:absolute;left:50%;top:-3px;width:1px;height:10px;background:var(--text-tertiary)}
.vl-meter i{position:absolute;left:0;right:0;top:-3px;height:10px;transition:transform 600ms var(--m-inout)}
.vl-meter i::before{content:"";position:absolute;left:-1px;top:0;width:3px;height:100%;border-radius:2px;background:var(--text-primary)}

/* =========================================================
   7. Pivot seviyeleri
   ========================================================= */
.pv{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:12px 16px;flex:1}
@container (min-width:520px){.pv{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:center}}
.pv-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pv-l,.pv-cur{display:grid;grid-template-columns:44px minmax(0,1fr) 5.5em;align-items:center;gap:12px;min-height:34px;padding:0 10px;border-radius:8px}
.pv-l+.pv-l{box-shadow:0 -1px 0 var(--line)}
.pv-k{justify-self:start;padding:3px 6px;border-radius:4px;background:var(--chip-bg);font:700 .75rem/1rem var(--font-mono);color:var(--text-secondary)}
.pv-p .pv-k{background:var(--action-tint);color:var(--action-text)}
.pv-p .pv-v{font-weight:700}
.pv-v{font:600 .875rem/1.25rem var(--font-num);text-align:right}
.pv-d{font:500 .75rem/1rem var(--font-num);color:var(--text-tertiary);text-align:right}
.pv-cur{margin:3px 0;background:color-mix(in srgb,var(--onn-2) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--onn-2) 45%,transparent)}
.pv-cur .pv-k{background:transparent;padding-left:0;color:var(--text-primary);font-family:var(--font-sans)}
.pv-cur .pv-v{color:var(--text-primary);font-weight:700}
.pv-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.pv-now{display:flex;flex-direction:column;margin:0}
.pv-nl{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);font-weight:600;letter-spacing:.04em}
.pv-px{font:700 1.5rem/2rem var(--font-num);letter-spacing:-.02em}
.pv-zone{margin:0;font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--text-primary)}
.pv-prev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;padding-top:10px;border-top:1px solid var(--line)}
.pv-prev dt{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.pv-prev dd{margin:2px 0 0;font:600 .875rem/1.25rem var(--font-num)}
.pv-syms button{font-family:var(--font-num);font-size:.875rem}

/* =========================================================
   8. Önemli oranlar
   ========================================================= */
.rt-list{list-style:none;margin:0;padding:4px 16px 8px;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.rt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id v" "rng rng";gap:8px 12px;padding:10px 0}
.rt+.rt{border-top:1px solid var(--line)}
@container (min-width:520px){.rt{grid-template-columns:minmax(0,1fr) 7.5em minmax(0,1.25fr);grid-template-areas:"id v rng";align-items:center}}
.rt-id{grid-area:id;display:flex;flex-direction:column;min-width:0}
.rt-id b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.rt-id small{font:500 .75rem/1rem var(--font-num);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-v{grid-area:v;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rt-n{font:700 1rem/1.5rem var(--font-num);white-space:nowrap}
.rt-rng{grid-area:rng;display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:8px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.rt-rng .num{font-family:var(--font-num);white-space:nowrap}
.rt-track{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--chip-bg),color-mix(in srgb,var(--onn-3) 22%,transparent));overflow-x:clip;overflow-clip-margin:6px}
.rt-track i,.r52-bar i{position:absolute;left:0;right:0;top:-4px;height:14px;transition:transform 600ms var(--m-inout)}
.rt-track i::before,.r52-bar i::before{content:"";position:absolute;left:-1px;top:0;width:3px;height:100%;border-radius:2px;background:var(--onn-2);box-shadow:0 0 8px color-mix(in srgb,var(--onn-2) 70%,transparent)}
:root[data-theme="light"] .rt-track i::before,:root[data-theme="light"] .r52-bar i::before{background:var(--action-text);box-shadow:none}

/* =========================================================
   9. Performans tablosu
   ========================================================= */
.pf-wrap{overflow-x:auto;padding:6px 8px 8px;flex:1;scrollbar-width:thin}
.pf{width:100%;min-width:520px;border-collapse:separate;border-spacing:2px;font-size:.875rem;line-height:1.25rem}
.pf thead th{padding:0;font-weight:500;text-align:right}
.pf thead th.pf-s{text-align:left}
.pf th button{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--text-tertiary);font:600 .75rem/1rem var(--font-sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.pf th.pf-s button{justify-content:flex-start}
.pf th button:hover{color:var(--text-primary);background:var(--chip-bg)}
.pf th[aria-sort="ascending"] button,.pf th[aria-sort="descending"] button{color:var(--text-primary)}
.pf th button svg{opacity:.5}
.pf th[aria-sort="ascending"] button svg,.pf th[aria-sort="descending"] button svg{opacity:1}
.pf tbody th{padding:0;font-weight:400;text-align:left;position:sticky;left:0;z-index:1;background:var(--bg-surface)}
:root[data-theme="dark"] .pf tbody th{background:#10151f}
.pf-s a{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px;color:inherit;text-decoration:none;white-space:nowrap}
.pf-s a>span:last-child{display:flex;flex-direction:column}
.pf-s b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.pf-s a:hover b{color:var(--action-text)}
.pf-px{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.pf-s .am,.pf-s .am-c{width:24px;height:24px}
.pf-s .am-pair .am-c{width:18px;height:18px}
.pf-c{padding:0 10px;border-radius:6px;text-align:right;white-space:nowrap;font:600 .875rem/1.25rem var(--font-num);color:var(--text-primary);background:var(--pf-c,transparent)}
.pf-c>.up>span,.pf-c>.down>span{font-size:.75rem}
.pf-c>.up,.pf-c>.down{color:var(--text-primary)}
.pf-c>.up>span{color:var(--up)}.pf-c>.down>span{color:var(--down)}
.tn1{--pf-c:color-mix(in srgb,var(--up) 6%,transparent)}
.tn2{--pf-c:color-mix(in srgb,var(--up) 11%,transparent)}
.tn3{--pf-c:color-mix(in srgb,var(--up) 17%,transparent)}
.tn-1{--pf-c:color-mix(in srgb,var(--down) 6%,transparent)}
.tn-2{--pf-c:color-mix(in srgb,var(--down) 11%,transparent)}
.tn-3{--pf-c:color-mix(in srgb,var(--down) 17%,transparent)}
.pf tbody tr{transition:transform 420ms var(--m-out)}
/* açık temada yön rengi (ok) en koyu tonda da AA kalsın: tonlar hafifletilir */
:root[data-theme="light"] .tn1{--pf-c:color-mix(in srgb,var(--up) 5%,transparent)}
:root[data-theme="light"] .tn2{--pf-c:color-mix(in srgb,var(--up) 8%,transparent)}
:root[data-theme="light"] .tn3{--pf-c:color-mix(in srgb,var(--up) 12%,transparent)}
:root[data-theme="light"] .tn-1{--pf-c:color-mix(in srgb,var(--down) 5%,transparent)}
:root[data-theme="light"] .tn-2{--pf-c:color-mix(in srgb,var(--down) 8%,transparent)}
:root[data-theme="light"] .tn-3{--pf-c:color-mix(in srgb,var(--down) 12%,transparent)}

/* =========================================================
   10. 52 hafta konumu
   ========================================================= */
.r52-list{list-style:none;margin:0;padding:4px 16px 8px;flex:1;display:flex;flex-direction:column;justify-content:space-around}
.r52{display:grid;gap:5px;padding:8px 0}
.r52+.r52{border-top:1px solid var(--line)}
.r52-h{display:flex;align-items:center;gap:8px;min-height:32px;color:inherit;text-decoration:none}
.r52-h .am,.r52-h .am-c{width:24px;height:24px}
.r52-h .am-pair .am-c{width:18px;height:18px}
.r52-h b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.r52-h:hover b{color:var(--action-text)}
.r52-px{margin-left:auto;font:700 .875rem/1.25rem var(--font-num)}
.r52-bar{position:relative;display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--chip-bg),color-mix(in srgb,var(--onn-3) 24%,transparent));overflow-x:clip;overflow-clip-margin:6px}
.r52-bar i{top:-3px}
.r52-ends{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.r52-ends>.num{font-family:var(--font-num)}
.r52-dist{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;text-align:center}
.r52-dist b{color:var(--text-primary);font-weight:600}

/* =========================================================
   11. Korelasyon: ıraksak ölçek, mavi (+) / turuncu (-), sıfırda nötr; her hücrede değer
   ========================================================= */
.cr-wrap{overflow-x:auto;padding:10px 16px 4px;scrollbar-width:thin}
.cr{width:100%;min-width:320px;table-layout:fixed;border-collapse:separate;border-spacing:2px}
.cr th{padding:4px 2px;font:600 .75rem/1rem var(--font-num);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr thead th{text-align:center}
.cr thead td{width:68px}
.cr tbody th{text-align:left;padding-right:6px}
.cr td{height:38px;padding:0;border-radius:4px;text-align:center;background:var(--cr-c,var(--chip-bg));color:var(--text-primary)}
.cr td .num{font:600 .75rem/1rem var(--font-num)}
.cr thead td{background:none}
.cr-d{--cr-c:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.cr-d .num{color:var(--text-tertiary)}
.cr0{--cr-c:var(--chip-bg)}
.crp1{--cr-c:color-mix(in srgb,var(--cr-pos) 22%,var(--hm-base))}
.crp2{--cr-c:color-mix(in srgb,var(--cr-pos) 46%,var(--hm-base))}
.crn1{--cr-c:color-mix(in srgb,var(--cr-neg) 22%,var(--hm-base))}
.crn2{--cr-c:color-mix(in srgb,var(--cr-neg) 46%,var(--hm-base))}
.cr-na .num{color:var(--text-tertiary)}
.cr-leg{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:4px 16px 8px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.cr-sw{display:inline-flex;gap:2px}
.cr-sw i{display:block;width:24px;height:10px;border-radius:2px;background:var(--cr-c)}
.cr-lc{margin-left:auto}
.cr-top{list-style:none;margin:0;padding:6px 16px 12px;display:grid;gap:2px;border-top:1px solid var(--line)}
.cr-top li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,auto);align-items:baseline;gap:10px;padding:4px 0;font-size:.875rem;line-height:1.25rem}
.cr-top li>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-top b{font:700 .875rem/1.25rem var(--font-num)}
.cr-top li>span:last-child{font-size:.75rem;text-align:right}
@container (max-width:420px){.cr-top li{grid-template-columns:minmax(0,1fr) auto}.cr-top li>span:last-child{display:none}}

/* =========================================================
   Mevcut bölümler widget ızgarasında: TL altın ve döviz 8 sütunda
   ========================================================= */
.wg-tl{container-type:inline-size}
.wg-tl .tl-body{flex:1}
.wg-tl .tl-grp{display:flex;flex-direction:column;min-width:0}
.wg-tl .tl-grid{flex:1;grid-auto-rows:1fr}
@media (min-width:1100px){@container (max-width:1100px){
  .wg-tl .tl-fx .tl-grid{grid-template-columns:minmax(0,1fr)}
  .wg-tl .tl-fx .tl-cell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;min-height:0;padding:8px 14px}
  .wg-tl .tl-fx .tl-n{grid-column:1}
  .wg-tl .tl-fx .tl-p{grid-column:2;grid-row:1/3;text-align:right}
  .wg-tl .tl-fx .tl-b{grid-column:1;justify-content:flex-start;gap:6px}
}}

/* Topluluk yarım genişlikte (ve telefonda): mesaj üstte, sembol odaları tek sütun liste.
   Satır: ikon, sembol + "Tartışmaya katıl", sağda değişim; ad ile değişim hiçbir genişlikte üst üste binmez.
   Liste kartın kalan yüksekliğini eşit satırlarla doldurur (komşu korelasyon kartıyla aynı boy, delik yok). */
.wg-community{container-type:inline-size}
.wg-community>.cm-empty{flex:1}
@container (max-width:860px){
  .wg-community .cm-empty{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:20px 16px}
  .wg-community .cm-big{font-size:1.25rem;line-height:1.75rem}
  .wg-community .cm-sub{margin-bottom:14px}
  .wg-community .cm-rooms{flex:1;align-self:stretch;display:flex;flex-direction:column;gap:1px}
  .wg-community .cm-rooms li{flex:1;display:flex}
  .wg-community .cm-rooms a{flex:1;flex-wrap:nowrap;min-height:56px;gap:12px}
  .wg-community .cr-n small{display:block}
  .wg-community .cm-rooms .chg{flex:none;margin-left:auto}
}

/* hareket azaltıldığında: çubuk ve işaretçiler anında */
@media (prefers-reduced-motion:reduce){
  .hm-bar i,.vl-bar i,.vl-meter i,.rt-track i,.r52-bar i,.gs-dot,.wg-b{transition:none}
}