/* =========================================================
   PriceONN v2 · ana sayfa (v1'den esinlenen yeniden yorum)
   Izgara: tek sütun (telefon) -> 8/4 çift panel (>=1100). Her bölüm aynı .pn kabuğu.
   Marka yüzeyleri (hero bandı, veri terminali, içerik görselleri) iki temada da kendi dilindedir:
   koyuda lacivert/ışıltılı, açıkta beyaz-açık mavi zemin + aynı motif koyu mavi, düşük opaklık.
   Renkler aşağıdaki tokenlardan gelir; açık tema :root'ta, koyu tema data-theme="dark" ile.
   ========================================================= */
.home{display:grid;gap:var(--gap);min-width:0}
.home>*{min-width:0}

/* ---------- marka yüzeyi tokenları: açık tema ---------- */
:root{
  --band-bg:radial-gradient(760px 420px at 82% -8%,rgba(47,107,255,.22),transparent 62%),radial-gradient(620px 380px at -4% 112%,rgba(44,201,216,.24),transparent 66%),linear-gradient(135deg,#f8fbff 0%,#e8f0fe 48%,#eef6fb 100%);
  --band-border:rgba(31,111,178,.18);
  --band-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -44px rgba(31,95,191,.5);
  --band-sheen:rgba(255,255,255,.55);
  --onn-ink:#087a92; --onn-glow:0 0 28px rgba(88,216,227,.35);
  --spot-bg:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9));
  --spot-bd:rgba(11,18,32,.09);
  --spot-shadow:0 1px 0 #fff inset,0 24px 48px -30px rgba(31,95,191,.45);
  --mini-bg:rgba(11,18,32,.03); --mini-bd:rgba(11,18,32,.08); --mini-bg-h:rgba(31,111,178,.07); --mini-bd-h:rgba(31,111,178,.24);
  --pill-bg:rgba(11,18,32,.06);
  --tk-bg:rgba(255,255,255,.66); --tk-line:rgba(11,18,32,.08); --tk-sep:rgba(11,18,32,.06); --tk-hover:rgba(31,111,178,.07);
  --term-bg:linear-gradient(180deg,#f8f9fb,#f1f3f7); --term-bd:rgba(11,18,32,.12);
  --term-shadow:0 1px 2px rgba(11,18,32,.05),0 16px 36px -28px rgba(11,18,32,.35);
  --term-inset:rgba(255,255,255,.9); --term-head:rgba(11,18,32,.03); --term-line:rgba(11,18,32,.09); --term-stripe:rgba(11,18,32,.028); --term-fresh:rgba(10,122,134,.10);
  --term-host:#08707b; --term-dir:#1765a6; --term-track:rgba(11,18,32,.10); --term-tick:rgba(11,18,32,.35);
  --term-hi:#0a8a97; --term-glow:rgba(10,138,151,.35); --term-rsi-a:#1f6fb2; --term-rsi-b:#12a4b4;
  --art-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .1 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --art-bd:rgba(11,18,32,.08); --art-logo:currentColor;
  --achip-bg:rgba(255,255,255,.86); --achip-bd:rgba(11,18,32,.1); --achip-ink:#0b1220;
  --dl-scrim:linear-gradient(180deg,rgba(248,251,255,0) 30%,rgba(248,251,255,.62) 72%,rgba(248,251,255,.8) 100%);
  --dl-ink:var(--text-primary);
  --g-blue:radial-gradient(120% 90% at 15% 10%,rgba(59,138,255,.22),transparent 60%),linear-gradient(135deg,#eaf1ff,#d6e4ff 55%,#e6efff); --g-blue-ink:#1f5fbf;
  --g-cyan:radial-gradient(120% 90% at 15% 10%,rgba(34,211,238,.22),transparent 60%),linear-gradient(135deg,#e4f7f9,#c9eef3 55%,#e0f4f7); --g-cyan-ink:#0a7a86;
  --g-green:radial-gradient(120% 90% at 15% 10%,rgba(16,185,129,.2),transparent 60%),linear-gradient(135deg,#e5f6ee,#cdebdc 55%,#e2f3ea); --g-green-ink:#0e7a4a;
  --g-violet:radial-gradient(120% 90% at 15% 10%,rgba(139,92,246,.18),transparent 60%),linear-gradient(135deg,#f0ecff,#ddd4ff 55%,#ece6ff); --g-violet-ink:#5b3fc4;
  --g-amber:radial-gradient(120% 90% at 15% 10%,rgba(245,165,36,.24),transparent 60%),linear-gradient(135deg,#fdf3e1,#f8e2b8 55%,#fbefd8); --g-amber-ink:#9a5b00;
  --c-oil-bg:linear-gradient(135deg,#eef1f5,#d5dce6); --c-oil-ink:#9a5b00;
}
/* ---------- marka yüzeyi tokenları: koyu tema ---------- */
:root[data-theme="dark"]{
  --band-bg:radial-gradient(760px 420px at 82% -8%,rgba(58,120,255,.5),transparent 62%),radial-gradient(620px 380px at -4% 112%,rgba(44,201,216,.24),transparent 66%),linear-gradient(135deg,#091230 0%,#0f2358 46%,#0a1738 100%);
  --band-border:rgba(124,160,255,.2);
  --band-shadow:0 30px 60px -40px rgba(20,60,160,.8);
  --band-sheen:rgba(130,180,255,.13);
  --onn-ink:var(--onn-1); --onn-glow:0 0 32px rgba(88,216,227,.45);
  --spot-bg:linear-gradient(180deg,rgba(9,15,34,.72),rgba(6,11,26,.6));
  --spot-bd:rgba(255,255,255,.12);
  --spot-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 48px -28px rgba(0,0,0,.8);
  --mini-bg:rgba(255,255,255,.05); --mini-bd:rgba(255,255,255,.08); --mini-bg-h:rgba(255,255,255,.09); --mini-bd-h:rgba(255,255,255,.16);
  --pill-bg:rgba(255,255,255,.08);
  --tk-bg:rgba(4,8,20,.55); --tk-line:rgba(255,255,255,.1); --tk-sep:rgba(255,255,255,.07); --tk-hover:rgba(255,255,255,.05);
  --term-bg:linear-gradient(180deg,#080d1b,#060a15); --term-bd:rgba(88,216,227,.16);
  --term-shadow:0 0 0 1px rgba(0,0,0,.2),0 24px 48px -32px rgba(10,40,90,.9);
  --term-inset:rgba(88,216,227,.08); --term-head:rgba(255,255,255,.02); --term-line:rgba(255,255,255,.08); --term-stripe:rgba(255,255,255,.018); --term-fresh:rgba(88,216,227,.08);
  --term-host:var(--onn-1); --term-dir:#8fb6ff; --term-track:rgba(255,255,255,.1); --term-tick:rgba(255,255,255,.35);
  --term-hi:var(--onn-1); --term-glow:rgba(88,216,227,.8); --term-rsi-a:#3a86de; --term-rsi-b:var(--onn-1);
  --art-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --art-bd:rgba(255,255,255,.08); --art-logo:#fff;
  --achip-bg:rgba(3,6,16,.55); --achip-bd:rgba(255,255,255,.16); --achip-ink:#e8eefc;
  --dl-scrim:linear-gradient(180deg,rgba(3,6,16,0) 20%,rgba(3,6,16,.78) 100%);
  --dl-ink:#fff;
  --g-blue:radial-gradient(120% 90% at 15% 10%,rgba(59,138,255,.45),transparent 60%),linear-gradient(135deg,#0a1a44,#16306e 55%,#0b1b47); --g-blue-ink:#9cc0ff;
  --g-cyan:radial-gradient(120% 90% at 15% 10%,rgba(34,211,238,.35),transparent 60%),linear-gradient(135deg,#062a36,#0d4a5c 55%,#072d3a); --g-cyan-ink:#8fe7f0;
  --g-green:radial-gradient(120% 90% at 15% 10%,rgba(16,185,129,.35),transparent 60%),linear-gradient(135deg,#05281f,#0a4a3a 55%,#062b22); --g-green-ink:#8ee6c1;
  --g-violet:radial-gradient(120% 90% at 15% 10%,rgba(139,92,246,.38),transparent 60%),linear-gradient(135deg,#150f38,#2a1f6c 55%,#171040); --g-violet-ink:#c4b5ff;
  --g-amber:radial-gradient(120% 90% at 15% 10%,rgba(245,165,36,.32),transparent 60%),linear-gradient(135deg,#231606,#4a3210 55%,#261807); --g-amber-ink:#ffcf7a;
  --c-oil-bg:linear-gradient(135deg,#27303f,#151b27); --c-oil-ink:#f5a524;
}
/* Koyu temada lacivert marka yüzeylerinde metin ve piyasa renkleri biraz daha parlak (AA korunur).
   Açık temada genel tokenlar geçerlidir. */
:root[data-theme="dark"] :is(.hero-band,.term,.art){
  --text-primary:#f2f4f8; --text-secondary:#b9c6dc; --text-tertiary:#93a3bf;
  --up:#2fcb6f; --down:#f2555a; --warn:#f5a524; --action-text:#7cc4ff; --focus:#7cc4ff;
  --up-tint:rgba(47,203,111,.14); --down-tint:rgba(242,85,90,.14); --line:rgba(255,255,255,.1)
}
.hero-band,.term{color:var(--text-primary)}

/* ---------- değişim göstergesi ---------- */
.chg{display:inline-flex;align-items:center;gap:4px;font:600 .875rem/1.25rem var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-tertiary)}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}
.chg:empty{display:none}
.chg.chg-pill{font-size:.75rem;line-height:1rem;padding:2px 6px;border-radius:6px;background:var(--chip-bg)}
.chg.chg-pill.up{background:var(--up-tint)}.chg.chg-pill.down{background:var(--down-tint)}
.chg.sm{font-size:.75rem;line-height:1rem}

/* ---------- varlık işaretleri ---------- */
.am{position:relative;display:inline-flex;flex:none;width:32px;height:32px}
.am-c{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font:700 .75rem/1 var(--font-sans);letter-spacing:-.02em;color:#fff;background:#2b3552;box-shadow:0 0 0 2px var(--bg-surface)}
.am-pair .am-c{position:absolute;width:22px;height:22px}
.am-pair .am-c:first-child{left:0;top:0;z-index:1}
.am-pair .am-c:last-child{right:0;bottom:0}
/* Rozet yazısı daireye ORANTILI sığar: vektör metin (32 birimlik kutu, hedef genişlik şablonda textLength ile).
   Daire 18 px de olsa 48 px de olsa yazı aynı oranda kalır; geniş harfli kodlar (DOG, XLM) sıkışarak sığar. */
.am-c>svg.am-s{display:block;width:100%;height:100%;fill:currentColor;stroke:none;overflow:visible}
.am-s text{font:700 13px var(--font-sans);letter-spacing:0}
.am-pair .am-s text{font-size:15px}
.c-usd{background:#177a4e}.c-eur{background:#2459c7}.c-gbp{background:#6d3fc0}.c-jpy{background:#c2413b}.c-chf{background:#c8102e}.c-try{background:#b3122f}
.c-au{background:radial-gradient(circle at 30% 30%,#ffe08a,#e6ae30 55%,#c08914);color:#241600}
.c-ag{background:radial-gradient(circle at 30% 30%,#ffffff,#c7ced9 55%,#8c96a5);color:#1b2230}
.c-btc{background:#f7931a;color:#1f1300;font-size:1rem}
.c-eth{background:#5263bd;font-size:1rem}
.c-idx{background:linear-gradient(135deg,#2e3a5c,#1b2338);color:#d7def0}
.c-oil{background:var(--c-oil-bg)}
.c-oil svg{width:16px;height:16px;fill:var(--c-oil-ink)}
:root[data-theme="light"] .c-idx{background:linear-gradient(135deg,#dfe6f3,#c9d3e6);color:#1b2338}

/* =========================================================
   1. HERO
   ========================================================= */
.home .hero{display:block;padding:0;gap:0;grid-template-columns:none}
.hero .hs-title .onn{background:none;-webkit-background-clip:border-box;background-clip:border-box}
/* overflow:clip: kesilen süs katmanları (eğik ışık huzmesi) bandı kaydırılabilir yapmasın (odak/scrollIntoView kaydırmasın) */
.hero-band{position:relative;overflow:hidden;overflow:clip;border-radius:var(--r-xl);isolation:isolate;border:1px solid var(--band-border);
  background:var(--grain) 0 0/240px 240px,var(--band-bg);box-shadow:var(--band-shadow)}
/* ::before (motif) ve ::after (ikinci katman) zemin.css'te: seçili zemine göre değişir. */
.hero-grid{display:grid;gap:24px;padding:28px 20px 24px}
.hero .hs-title{margin:0;font-size:2.5rem;line-height:1.1;font-weight:700;letter-spacing:-.035em;color:var(--text-primary);text-wrap:balance}
.hero .hs-title .onn{color:var(--onn-ink);text-shadow:var(--onn-glow)}
.hero-lead{margin:16px 0 0;max-width:52ch;font-size:1rem;line-height:1.5rem;color:var(--text-secondary)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-fine{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:.75rem;line-height:1rem;color:var(--text-secondary)}

.spot{position:relative;align-self:start;padding:18px 18px 16px;border-radius:16px;background:var(--spot-bg);border:1px solid var(--spot-bd);box-shadow:var(--spot-shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.spot-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spot-id{display:flex;align-items:center;gap:10px;min-height:44px;color:inherit;text-decoration:none;min-width:0}
.spot-id>span:last-child{display:flex;flex-direction:column;min-width:0}
.spot-id b{font-size:1rem;line-height:1.25rem;font-weight:600}
.spot-id small{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-id:hover b{text-decoration:underline;text-underline-offset:3px}
.st-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px;font-size:.75rem;font-weight:600;white-space:nowrap;background:var(--pill-bg);color:var(--text-secondary)}
.st-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-pill.st-live{color:var(--up);background:var(--up-tint)}
.st-pill.st-stale{color:var(--warn);background:var(--warn-tint)}
.spot-px{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;font:700 2.25rem/1.1 var(--font-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.spot-px small{font:500 .875rem/1 var(--font-sans);color:var(--text-tertiary);letter-spacing:0}
.spot-chg{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0}
.spot-abs{font-size:.875rem;color:var(--text-secondary)}
.spot-cap{font-size:.75rem;color:var(--text-tertiary)}
.spot-spark{display:block;width:100%;height:72px;margin-top:12px;color:var(--text-tertiary)}
.spot-spark.s-up{color:var(--up)}.spot-spark.s-down{color:var(--down)}
.spot-meta{display:flex;justify-content:space-between;gap:8px;margin:6px 0 0;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.spot-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.spot-sub:empty{display:none}
.spot-mini{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--mini-bg);border:1px solid var(--mini-bd);color:inherit;text-decoration:none;min-width:0;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.spot-mini:hover{background:var(--mini-bg-h);border-color:var(--mini-bd-h)}
.sm-n{font-size:.75rem;line-height:1rem;color:var(--text-secondary);font-weight:600}
.sm-p{font:600 1rem/1.5rem var(--font-num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-c,.spot-mini .faint{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.spot-mini .chg{font-size:.75rem;line-height:1rem}
/* altın kartı: spark yerine aynı yükseklikte üç satır (gerçek TL fiyatları) */
.spot-rows{list-style:none;margin:12px 0 0;padding:0;height:72px;display:flex;flex-direction:column;justify-content:space-between}
.spot-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.875rem;line-height:1.25rem;color:var(--text-secondary);border-bottom:1px dashed var(--mini-bd);padding-bottom:2px}
.spot-rows li:last-child{border-bottom:0}
.spot-rows .num{font:600 .875rem/1.25rem var(--font-num);color:var(--text-primary)}

/* ---------- hero slaytları ----------
   Tüm slaytlar tek ızgara hücresinde üst üste: yükseklik en uzun slayttır, geçişte kayma olmaz.
   Etkin olmayan slayt visibility:hidden (odak ve ekran okuyucu dışı). Denetimler DOM'da önce (döndürme düğmesi
   sekme sırasında ilk), görselde altta. html.m-js yoksa (betik yok) denetimler görünmez, yalnız ilk slayt görünür. */
.hs{display:grid;grid-template-rows:auto auto}
.hs-track{grid-row:1;display:grid;min-width:0;touch-action:pan-y}
.hs-slide{grid-area:1/1;display:grid;min-width:0}
.hs-slide>.hero-grid{min-width:0}
.hs-slide:not(.is-on):not(.is-out){visibility:hidden}
.hs-ctrl{grid-row:2;display:none;align-items:center;gap:2px;padding:0 12px 10px}
.m-js .hs-ctrl,.hs-ready .hs-ctrl{display:flex}
.hs-ctrl[hidden]{display:none!important}
.hs-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--text-secondary);cursor:pointer;
  transition:transform 160ms var(--m-out),opacity 160ms var(--m-out)}
.hs-btn svg{width:18px;height:18px}
.hs-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hs-btn:hover{color:var(--text-primary)}}
.hs-dots{display:flex;align-items:center}
.hs-dot{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.hs-dot i{position:relative;display:block;width:24px;height:4px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 18%,transparent);transition:opacity 200ms var(--m-out)}
.hs-dot b{position:absolute;inset:0;border-radius:inherit;background:var(--onn-ink);transform-origin:left;transform:scaleX(0)}
.hs-dot[aria-current="true"] i{background:color-mix(in srgb,var(--onn-ink) 32%,transparent)}
@media (hover:hover) and (pointer:fine){.hs-dot:hover i{background:color-mix(in srgb,var(--text-primary) 30%,transparent)}}
.hs-ctrl .hs-play{margin-right:2px}
@media (max-width:359px){.hs-prev,.hs-next{display:none}}
.m-js .hs .hero-grid{padding-bottom:12px}
@media (min-width:600px){.hs-ctrl{padding:0 20px 14px}}
@media (min-width:1000px){.hs-ctrl{padding:0 36px 16px}.m-js .hs .hero-grid{padding-bottom:20px}}

/* kayan fiyat şeridi: fare üstünde, odakta ve düğmeyle durur; hareket azaltıldığında kaymaz */
.tk{position:relative;display:flex;align-items:stretch;height:48px;border-top:1px solid var(--tk-line);background:var(--tk-bg)}
.tk-lbl{display:flex;align-items:center;gap:8px;flex:none;padding:0 14px 0 16px;font:600 .75rem/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--up);border-right:1px solid var(--tk-line)}
.tk-lbl .dot{width:6px;height:6px}
.tk-view{position:relative;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.tk-track{display:flex;width:max-content;height:100%;animation:po-tk 70s linear infinite}
.tk:focus-within .tk-track,.tk.paused .tk-track,.hero-off .tk-track{animation-play-state:paused}
/* fare üstünde yavaşlayarak durur (motion.js hızı 1 -> 0 yumuşatır); betik yoksa anında durur */
.tk:not(.tk-js):hover .tk-track{animation-play-state:paused}
@keyframes po-tk{to{transform:translateX(-50%)}}
.tk-list{display:flex;list-style:none;margin:0;padding:0}
.tk-list a{display:flex;align-items:center;gap:10px;height:100%;padding:0 18px;border-right:1px solid var(--tk-sep);color:inherit;text-decoration:none;white-space:nowrap}
.tk-list a:hover{background:var(--tk-hover)}
.tk-list b{font-size:.875rem;font-weight:600}
.tk-list .num{font:500 .875rem/1 var(--font-num);color:var(--text-secondary)}
.tk-list .chg{font-size:.75rem}
.tk-btn{flex:none;width:48px;border:0;border-left:1px solid var(--tk-line);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tk-btn:hover{color:var(--text-primary);background:var(--tk-hover)}
.tk-btn svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
  .tk-list[aria-hidden="true"],.tk-btn{display:none}
  .tk-view{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
}

@media (min-width:600px){
  .hero-grid{padding:36px 32px 32px}
  .hero .hs-title{font-size:3rem}
}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding:52px 48px 44px}
  .hero .hs-title{font-size:3.5rem}
  .hero-lead{font-size:1.125rem;line-height:1.75rem}
  .spot{padding:20px 22px 18px}
  .spot-px{font-size:3rem}
}

/* =========================================================
   Widget ızgarası (docs/ANA-SAYFA-WIDGETLAR.md): telefon tek sütun (sıra --om), tablet ve masaüstü 12 sütun,
   grid-auto-flow:dense. Genişlikler sunucuda paketlenir (Content\HomeWidgets::pack), satırda delik kalmaz.
   --md: tablet genişliği (6 ya da 12), --lg: masaüstü genişliği (4, 6, 8, 12).
   ========================================================= */
.wgrid{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);grid-auto-flow:dense;min-width:0}
.wgrid .wg{min-width:0;order:var(--om,0)}
/* Yığın sarmalayıcıları 1100 px altında YOK sayılır: kartlar doğrudan ızgaranın gözesi olur, sıra --om/--ot. */
.wcol{display:contents}
@media (min-width:700px){
  .wgrid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .wgrid .wg{grid-column:span var(--md,12);order:var(--ot,0)}
}
@media (min-width:1100px){
  .wgrid>.wg{grid-column:span var(--lg,12);order:0}
  /* İki bağımsız dikey yığın (docs/ANA-SAYFA-WIDGETLAR.md "Masaüstü akışı"): geniş yığın 8, dar yığın 4 sütun.
     Her yığın kendi içinde eşit boşlukla akar; bir kart yan komşusunun boyuna göre uzatılmaz, kısa kartın
     yanında satır kadar ölü alan açılmaz. `align-items:start` yığınların da içeriği kadar durmasını sağlar. */
  .wcol{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
  .wcol-main{grid-column:span 8}
  .wcol-side{grid-column:span 4}
  .wcol-solo{grid-column:1/-1}
  .wcol>.wg{order:0}
}
/* Her kart kendi içeriği kadar yer kaplar (align-items:start). Eskiden yan paneller `contain:size` ile komşusuna
   uzatılıyordu; kabın boyu içerikten bağımsız olduğu için kısa kartın içinde ölü alan, uzun listede ise kabın
   dışına taşma oluyordu. Kart yüksekliğini artık yalnız içeriği belirler. */

/* Grafik kartını genişletme (home.js, "Grafiği genişlet"): grafik satırın tamamını kaplar, piyasa listesi altına
   iner ve orada çok sütuna açılır. Tercih kullanıcıya göre saklanır; ilk boyamadan ÖNCE theme-boot.js
   html[data-chw="1"] yazar, böylece yenilemede yerleşim kaymaz (CLS 0). */
@media (min-width:1100px){
  :root[data-chw="1"] .wgrid>.wg-chart,:root[data-chw="1"] .wgrid>.wg-markets{grid-column:1/-1}
  :root[data-chw="1"] .wgrid>.wg-markets .mk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:16px}
}
/* Geçiş: ızgara sütunu canlandırılamaz, bu yüzden yeni genişliğe oturan iki kart kısa bir sönümle gelir.
   Hareket azaltıldığında canlandırma yok (aşağıdaki kural hiç uygulanmaz). */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  :root.ch-anim .wgrid>.wg-chart,:root.ch-anim .wgrid>.wg-markets{animation:ch-settle 220ms var(--ease)}
}
@keyframes ch-settle{from{opacity:.55}to{opacity:1}}

/* ---------- sekmeler ---------- */
.ch-tabs,.mk-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.ch-tabs::-webkit-scrollbar,.mk-tabs::-webkit-scrollbar{display:none}
.ch-tabs button,.mk-tabs button{position:relative;flex:none;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;border-radius:8px;white-space:nowrap;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ch-tabs button::after,.mk-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)}
.ch-tabs button:hover,.mk-tabs button:hover{color:var(--text-primary);background:var(--chip-bg)}
.ch-tabs button[aria-selected="true"],.mk-tabs button[aria-selected="true"]{color:var(--text-primary);font-weight:600}
.ch-tabs button[aria-selected="true"]::after,.mk-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ch-tabs{margin-left:auto}

/* =========================================================
   2. TL altın + döviz
   ========================================================= */
.tl-body{display:grid;gap:16px;padding:16px}
.tl-gh{margin:0 0 8px;font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.tl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tl-cell{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--bg-surface);min-width:0;transition:background var(--t-fast) var(--ease)}
.tl-cell:hover{background:var(--bg-raised)}
.tl-n{display:flex;align-items:center;gap:8px;min-width:0;font-size:.875rem;line-height:1.25rem;font-weight:600}
.tl-n>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-n .am{width:24px;height:24px}.tl-n .am-c{width:24px;height:24px;font-size:.75rem}
.tl-n .am-pair .am-c{width:18px;height:18px}
.tl-n .am-pair .am-c{font-size:.75rem}
.tl-n .chg{margin-left:auto}
.tl-p{font:600 1.25rem/1.75rem var(--font-num);letter-spacing:-.01em;white-space:nowrap}
.tl-p small{margin-left:4px;font:500 .875rem/1 var(--font-sans);color:var(--text-tertiary)}
.tl-b{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.tl-b>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-b .num{color:var(--text-secondary);font-family:var(--font-num)}
@media (max-width:599px){
  .tl-fx .tl-grid{grid-template-columns:minmax(0,1fr)}
  .tl-fx .tl-cell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
  .tl-fx .tl-n{grid-column:1}.tl-fx .tl-p{grid-column:2;grid-row:1/3;text-align:right}.tl-fx .tl-b{grid-column:1;justify-content:flex-start}
  .tl-fx .tl-b .num::before{content:" "}
  .cr-n small{display:none}
  .cm-rooms a{flex-wrap:wrap;gap:6px 10px}
}
@media (min-width:600px){
  .tl-gold .tl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl-fx .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .tl-body{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px}
  .tl-fx .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-gold .tl-cell,.tl-fx .tl-cell{min-height:104px;justify-content:space-between}
}

/* =========================================================
   3. Grafik + piyasalar
   ========================================================= */
.pn-chart .pn-h{flex-wrap:nowrap}
.pn-chart .pn-t{flex:none}
.ch-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.ch-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Grafik paneli (yeni motor, js/chart/ui/home-chart.js). Bütün denetimler sunucuda basılı ve sabit yükseklikte:
   motor tembel yüklenince yerleşim kaymaz (CLS 0). Motorun kendi stilleri css/chart.css (tembel yüklenir). */
/* Başlık: sembol rozeti, ad, fiyat, değişim (solda) ve sembol sekmeleri (sağda). "Grafik" yazısı ve ikonu yok. */
.ch-h{flex-wrap:nowrap;gap:12px}
.ch-q{display:flex;align-items:center;gap:10px;flex:none;max-width:100%}
.ch-mark{flex:none;display:inline-flex}
.ch-mark>[hidden]{display:none}
.ch-id{display:flex;flex-direction:column;flex:none}
.ch-name{font-size:1rem;line-height:1.25rem;font-weight:700;white-space:nowrap}
.ch-q .st{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--warn);font-weight:600}
.ch-q .st:empty{display:none}
.ch-px{font:700 1.375rem/1.75rem var(--font-num);letter-spacing:-.02em;white-space:nowrap;margin-left:4px}
.ch-q .chg{white-space:nowrap;flex:none}
/* Araç çubuğu eylemleri: genişlet, ayrı pencerede aç, tam ekran. Yalnız ikon; açıklama ipucu kutusunda (.ch-tip). */
.ch-acts{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.ch-ib{padding:0;width:var(--ch-bh);min-width:var(--ch-bh)}
.ch-ib svg.i{width:18px;height:18px}
.ch-full{text-decoration:none;border-color:color-mix(in srgb,var(--onn-2) 55%,var(--line));background:color-mix(in srgb,var(--onn-2) 12%,transparent)}
.ch-full svg.i{color:var(--onn-2)}
.ch-full[aria-pressed="true"]{background:color-mix(in srgb,var(--onn-2) 22%,transparent);border-color:var(--onn-2)}
@media (hover:hover) and (pointer:fine){.ch-full:hover{background:color-mix(in srgb,var(--onn-2) 22%,transparent);border-color:var(--onn-2)}}
.ch-wbtn .ch-i-narrow{display:none}
.ch-wbtn[aria-pressed="true"] .ch-i-wide{display:none}
.ch-wbtn[aria-pressed="true"] .ch-i-narrow{display:inline-block}
/* Genişletme yalnız yan panelin bulunduğu masaüstü ızgarasında; ayrı pencere yalnız çok pencereli masaüstünde
   anlamlıdır. */
@media (max-width:1099px){.ch-acts .ch-wbtn{display:none}}
@media (max-width:699px){.ch-acts .ch-pbtn{display:none}}
.ch-msg{display:flex;align-items:center;gap:8px;margin:0 16px 4px;padding:10px 12px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:var(--warn-tint);color:var(--text-primary);font-size:.875rem;line-height:1.25rem}
.ch-msg[hidden]{display:none}
/* Tek satır araç çubuğu. Düğme boyu --ch-bh: fare ile 34 px, dokunmatikte 44 px (dokunma hedefi). */
.ch-panel{--ch-bh:44px}
@media (hover:hover) and (pointer:fine){.ch-panel{--ch-bh:34px}}
.ch-tools{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);min-width:0}
.ch-tools .seg{display:inline-flex;gap:1px;padding:2px;border-radius:9px;background:var(--chip-bg);border:1px solid var(--line);min-width:0;overflow-x:auto;scrollbar-width:none;flex:0 1 auto}
.ch-tools .seg::-webkit-scrollbar{display:none}
.ch-tools .seg button{flex:none;min-width:36px;min-height:calc(var(--ch-bh) - 6px);padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);font:500 .8125rem/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.ch-tools .seg button:hover{color:var(--text-primary)}
.ch-tools .seg button[aria-checked="true"]{background:var(--bg-raised);color:var(--text-primary);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.25),0 0 0 1px var(--line)}
.ch-ind{display:flex;gap:6px;flex:none}
.ch-tb{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:var(--ch-bh);min-height:var(--ch-bh);height:var(--ch-bh);padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--chip-bg);
  color:var(--text-secondary);font:500 .8125rem/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.ch-tb:hover{color:var(--text-primary)}
.ch-tb[aria-pressed="true"],.ch-tb[aria-expanded="true"]{background:var(--bg-raised);color:var(--text-primary);border-color:color-mix(in srgb,var(--onn-2) 60%,var(--line))}
.ch-tb[aria-pressed="true"]{font-weight:600}
.ch-typebtn{padding:0 6px 0 8px;gap:2px}
.ch-typebtn svg.i{width:20px;height:20px}
.ch-typebtn .ch-chev{width:14px;height:14px;color:var(--text-tertiary)}
.ch-key{display:inline-block;width:10px;height:3px;border-radius:2px;background:var(--k);opacity:.45;transition:opacity var(--t-fast) var(--ease)}
.ch-key+.ch-key{margin-left:-3px}
.ch-tb[aria-pressed="true"] .ch-key{opacity:1}
.ch-menu{position:relative}
.ch-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:208px;padding:4px;border-radius:12px;border:1px solid var(--line);background:var(--bg-raised);
  box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity 150ms var(--m-out,ease),transform 150ms var(--m-out,ease)}
.ch-pop.open{opacity:1;transform:none}
.ch-pop[hidden]{display:none}
.ch-pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);font:500 .875rem/1.25rem var(--font-sans);text-align:left;cursor:pointer}
.ch-pop button:hover,.ch-pop button:focus-visible{background:var(--chip-bg)}
.ch-pop button svg.i{width:20px;height:20px;color:var(--text-secondary)}
.ch-pop button span{flex:1}
.ch-pop .ch-ck{width:16px;height:16px;color:var(--onn-2);opacity:0}
.ch-pop [aria-checked="true"]{font-weight:600}
.ch-pop [aria-checked="true"] .ch-ck{opacity:1}
.ch-wrap{position:relative;flex:1;min-height:0;padding:4px 0 0}
.ch-canvas{position:relative;height:300px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* Motor .pc'ye touch-action:none verir; ana sayfada dikey parmak kaydırması sayfaya kalır (yatay kaydırma ve iki
   parmak yakınlaştırma grafikte). Dikey tekerlek de sayfayı kaydırır (motor seçeneği pageScroll). */
.ch-canvas.pc{touch-action:pan-y}
.ch-canvas.pc:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
/* İskelet: motor gelene kadar sabit yükseklikte silik ızgara (yerleşim kayması yok). */
.ch-skel{background:linear-gradient(to right,transparent calc(100% - 64px),color-mix(in srgb,var(--line) 60%,transparent) calc(100% - 64px) calc(100% - 63px),transparent calc(100% - 63px)),
  repeating-linear-gradient(to bottom,transparent 0 59px,color-mix(in srgb,var(--line) 70%,transparent) 59px 60px)}
.ch-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch-alt.ch-empty{position:static;width:auto;height:auto;clip:auto;margin:0;padding:120px 16px;text-align:center;color:var(--text-secondary);white-space:normal}
.ch-canvas.loading::after{content:"";position:absolute;z-index:4;left:16px;right:72px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--onn-2),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:po-load 1s var(--ease) infinite}
@keyframes po-load{from{background-position:-40% 0}to{background-position:140% 0}}
.ch-err{position:absolute;inset:4px 0 0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;background:color-mix(in srgb,var(--panel-bg,var(--bg-surface)) 88%,transparent)}
.ch-err p{margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.25rem}
/* hızlı gösterge değerleri (home-chart.js MiniLegend) */
.hc-ilg{position:absolute;left:10px;top:0;right:72px;z-index:2;display:flex;flex-wrap:wrap;gap:0 12px;pointer-events:none;font:500 12px/16px var(--font-num);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.hc-ilg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hc-ilg b{font:500 12px/16px var(--font-sans);color:var(--text-secondary)}
.hc-ilg em{font-style:normal}
.hc-k{display:inline-block;width:10px;height:3px;border-radius:2px}
.ch-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;padding-block:4px;min-height:44px}
.ch-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-tz{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.ch-tz>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ch-tz svg.i{flex:none;color:var(--text-tertiary)}
/* Dar ekran: araç çubuğu iki satıra iner (zaman dilimi tam satır, altında tip, göstergeler ve eylemler);
   başlıkta sekmeler fiyatın altına geçer. 700 px ve üstünde her şey tek satırdır. */
@media (max-width:699px){
  .pn-chart .ch-h{flex-wrap:wrap;gap:2px 12px;padding-bottom:0}
  .pn-chart .ch-h .ch-q{flex:1 1 100%}
  .pn-chart .ch-h .ch-tabs{margin-left:-8px;flex:1 1 100%}
  .ch-tools{flex-wrap:wrap}
  .ch-tools .seg{flex:1 1 100%}
  .pn-chart .ch-tools .seg button{flex:1 1 0;min-width:0;padding:0 2px}
}
@media (max-width:359px){
  .pn-chart .ch-q{gap:2px 6px;flex-wrap:wrap}
  .pn-chart .ch-px{font-size:1rem;line-height:1.5rem;margin-left:0}
  .pn-chart .ch-q .chg{padding-inline:5px}
  .pn-chart .ch-mark .am-c{transform:scale(.875);margin:0 -2px}
  .pn-chart .ch-name{font-size:.875rem}
  .pn-chart .ch-tools .seg button{font-size:.75rem}
}
@media (max-width:399px){
  .ch-px{font-size:1.25rem}
  .ch-tb{padding:0 8px}
  .ch-typebtn{padding:0 6px 0 8px}
}
@media (min-width:600px){.ch-canvas{height:420px}}
@media (min-width:1100px){.ch-canvas{height:520px}}
/* Kart dar kaldığında (yan panelli masaüstü ızgarası) çubuk tek satırda kalsın diye sıkışır. */
.pn-chart{container:chcard/inline-size}
@container chcard (max-width:760px){
  .ch-tools{gap:4px;padding-inline:10px}
  .ch-tools .seg button{min-width:32px;padding:0 5px}
  .ch-tb{padding:0 8px}
  .ch-ind,.ch-acts{gap:4px}
  .ch-px{font-size:1.25rem}
}

/* İpucu kutusu (home.js): kalın ad, altında açıklama, varsa kısayol. Yalnız fare ve klavye odağında. */
.ch-tip{position:fixed;left:0;top:0;z-index:60;display:grid;gap:2px;max-width:260px;padding:8px 10px;border-radius:10px;border:1px solid var(--border-strong,var(--line));
  background:var(--bg-raised);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);color:var(--text-primary);pointer-events:none;opacity:0;transform:translateY(-3px);
  transition:opacity 120ms var(--ease),transform 120ms var(--ease)}
.ch-tip.up{transform:translateY(3px)}
.ch-tip.on{opacity:1;transform:none}
.ch-tip::before{content:"";position:absolute;left:calc(var(--tip-x,50%) - 5px);top:-5px;width:9px;height:9px;transform:rotate(45deg);background:inherit;border:inherit;border-right:0;border-bottom:0}
.ch-tip.up::before{top:auto;bottom:-5px;transform:rotate(225deg)}
.ch-tip b{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 .8125rem/1.25rem var(--font-sans)}
.ch-tip kbd{padding:0 6px;border-radius:5px;border:1px solid var(--line);background:var(--chip-bg);font:500 .75rem/1.125rem var(--font-num);color:var(--text-secondary)}
.ch-tip span{font:400 .75rem/1.125rem var(--font-sans);color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){.ch-tip{transition:none;transform:none}}

/* Yan yana dururken (>=1100 px, grafik genişletilmemiş) piyasalar kartı grafik kartıyla AYNI boydadır: kartın boyu
   içeriğinden bağımsızdır (contain:size), satırın boyunu grafik belirler, liste kart içinde kayar. */
@media (min-width:1100px){
  :root:not([data-chw="1"]) .wgrid>.wg-markets{align-self:stretch;contain:size}
  :root:not([data-chw="1"]) .wgrid>.wg-markets .mk-list{max-height:none}
}

.pn-mk .pn-h{padding-right:8px}
.mk-tabs{flex:none;padding:4px 8px 0;border-bottom:1px solid var(--line)}
.pn>.pn-h,.pn>.pn-foot,.pn>.cal-state{flex:none}
.mk-list{list-style:none;margin:0;padding:4px 8px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* Masaüstünde piyasa listesi en çok --mk-slots satır gösterir, gerisi kart içinde kaydırılır: grafiğin yanındaki
   kart grafikle aynı boya oturur. `max-height` olduğu için liste kısaysa kart kendiliğinden kısalır, hiçbir
   durumda içeriğinden uzun olmaz. Grafik genişletildiğinde liste çok sütuna açılır ve sınıra hiç dayanmaz. */
@media (min-width:1100px){.mk-list{--mk-slots:9;max-height:calc(var(--mk-slots) * 61px)}}
.mk-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:8px;border-radius:10px;color:var(--text-primary);text-decoration:none;transition:background var(--t-fast) var(--ease)}
.mk-row:hover{background:var(--bg-raised)}
.mk-list li+li .mk-row{border-top:1px solid var(--line);border-radius:0}
.mk-list li+li .mk-row:hover{border-radius:10px;border-top-color:transparent}
.mk-id{display:flex;flex-direction:column;min-width:0}
.mk-id b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.mk-nm{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-nm .st{color:var(--warn);font-weight:600}
.mk-nm .st:empty{display:none}
.mk-nm .st:not(:empty)::after{content:" · ";color:var(--text-tertiary);font-weight:400}
.mk-px{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mk-px .num{font:600 .875rem/1.25rem var(--font-num);white-space:nowrap}

/* =========================================================
   4. Canlı akış (eski "veri terminali"; komut satırı süsü yok)
   Sol: sembol başına bir satır (ad, 30 dk eğilim, son fiyat, 1 dk değişim). Sağ: seçili sembolün odağı
   (son fiyat, güne göre değişim, son 60 dk çizgisi, gün içi aralık, RSI 14, SMA 50/200). Sıra sabittir.
   ========================================================= */
.term{background:var(--term-bg);border-color:var(--term-bd);box-shadow:var(--term-shadow)}
.term::before{box-shadow:0 1px 0 var(--term-inset) inset}
.term>.pn-h{border-bottom-color:var(--term-line);flex-wrap:nowrap}
.lf-h .pn-t{flex:none}
.lf-aside{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-tertiary)}
.lf-aside>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lf-sep{flex:none}
.term-live{display:inline-flex;align-items:center;gap:8px;flex:none;font-weight:600;color:var(--up)}
.term-live .dot{width:6px;height:6px}
.term-body{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-width:0}
.lf-left{display:flex;flex-direction:column;min-width:0;container:lf-left/inline-size}
/* sütun başlıkları: liste ızgarasıyla aynı kolonlar */
.lf-cols,.lf-row{display:grid;grid-template-columns:minmax(0,1fr) 72px auto minmax(6.5rem,auto);align-items:center;gap:12px;padding:0 16px}
.lf-cols{min-height:32px;font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);border-bottom:1px solid var(--term-line)}
.lf-c-sp{text-align:center;white-space:nowrap}.lf-c-px,.lf-c-d{text-align:right;white-space:nowrap}
.lf-l-short{display:none}
@media (max-width:599px){.lf-upd-l{display:none}.lf-aside{gap:6px}}
.lf-list{list-style:none;margin:0;padding:4px 0}
.lf-row{position:relative;min-height:44px;border-radius:8px;margin:0 6px;padding:0 10px;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.lf-row+.lf-row{margin-top:1px}
.lf-row:hover{background:var(--term-stripe)}
.lf-row[aria-selected="true"]{background:color-mix(in srgb,var(--term-hi) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--term-hi) 35%,transparent)}
.lf-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* yeni dakika vurgusu: arka plan değil, opaklığı sönen bir katman (hareket azaltıldıysa yok) */
.lf-row::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--term-fresh);opacity:0;pointer-events:none}
.lf-row.fresh::after{animation:m-fade-out 1400ms var(--m-soft) both}
.lf-nm{display:flex;flex-direction:column;min-width:0;line-height:1.125rem}
.lf-nm b{font-size:.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-nm small{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-dead{color:var(--warn);font-weight:600}
.lf-closed{color:var(--text-tertiary);font-weight:600}
.lf-sp{display:block;width:72px;height:24px;color:var(--text-tertiary)}
.lf-sp svg{display:block;width:100%;height:100%;overflow:visible}
.lf-sp-l{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:d 600ms var(--m-inout)}
.lf-sp.s-up{color:var(--up)}.lf-sp.s-down{color:var(--down)}
.lf-px{font:600 .875rem/1.25rem var(--font-num);color:var(--text-primary);text-align:right;white-space:nowrap}
.lf-d{display:flex;flex-direction:column;align-items:flex-end;font:600 .8125rem/1rem var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-tertiary)}
.lf-d .lf-d-pct{font-size:.75rem;font-weight:500;color:var(--text-tertiary)}
.lf-d.up .lf-d-abs{color:var(--up)}.lf-d.down .lf-d-abs{color:var(--down)}
.lf-row.is-dead .lf-sp,.lf-row.is-dead .lf-px{opacity:.5}
.lf-row.is-dead .lf-sp{color:var(--text-tertiary)}
.lf-empty{padding:12px 16px;font-size:.875rem;color:var(--text-tertiary)}

/* ---- odak ---- */
.term-focus{display:flex;flex-direction:column;gap:14px;padding:16px;border-top:1px solid var(--term-line);container:lf-focus/inline-size}
.lf-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lf-id{min-width:0}
.lf-sym{display:flex;flex-direction:column;margin:0;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--text-primary)}
.lf-sym small{font-size:.75rem;line-height:1rem;font-weight:500;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-day{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:6px 0 0;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.lf-day .chg{font-size:.75rem;line-height:1rem}
.lf-day-abs{color:var(--text-secondary)}
.lf-last{position:relative;margin:0;flex:none;font:600 1.625rem/2rem var(--font-num);letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap}
.lf-chart{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:150px;color:var(--text-tertiary)}
.lf-chart.s-up{color:var(--up)}.lf-chart.s-down{color:var(--down)}
.lf-ch-svg{display:block;flex:1 1 auto;width:100%;min-height:96px;overflow:visible}
.lf-ch-l{fill:none;stroke:currentColor;stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:d 400ms var(--m-inout)}
.lf-ch-a{stroke:none}
.lf-ch-lbl{position:absolute;right:0;font:500 .75rem/1rem var(--font-num);color:var(--text-tertiary);padding:0 4px;border-radius:4px;background:color-mix(in srgb,var(--panel-bg) 70%,transparent)}
.lf-ch-hi{top:0}.lf-ch-lo{bottom:1.625rem}
.lf-ch-x{display:flex;justify-content:space-between;gap:8px;margin:6px 0 0;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.lf-ch-x span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-ch-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 16px;text-align:center;font-size:.875rem;color:var(--text-tertiary)}
.lf-ch-empty[hidden]{display:none}
.lf-met{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding-top:12px;border-top:1px solid var(--term-line)}
.lf-m{min-width:0}
.lf-m dt{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);margin-bottom:4px}
.lf-m dd{margin:0;display:flex;align-items:center;gap:10px;font:600 .875rem/1.25rem var(--font-num);color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.lf-rsi-v{min-width:2.5rem}
.lf-slash{color:var(--text-tertiary);font-weight:400}
.rbar,.rsi{position:relative;flex:1;height:6px;min-width:60px;border-radius:3px;background:var(--term-track)}
/* işaretçi kutusu çubuk genişliğinde ve kendi genişliği kadar kayar; yatayda kırp (ışıma için 6px pay) ki sayfa taşmasın */
.rbar{overflow-x:clip;overflow-clip-margin:6px}
.rbar i{position:absolute;left:0;right:0;top:-4px;height:14px;transition:transform 600ms var(--m-inout)}
.rbar i::before{content:"";position:absolute;left:-1px;top:0;width:3px;height:100%;border-radius:2px;background:var(--term-hi);box-shadow:0 0 10px var(--term-glow)}
.rsi i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--term-rsi-a),var(--term-rsi-b));transform-origin:left;transition:transform 600ms var(--m-inout)}
.rsi b{position:absolute;top:-3px;width:1px;height:12px;background:var(--term-tick)}
.tf-note{font:500 .75rem/1rem var(--font-sans);color:var(--text-tertiary);white-space:nowrap}
.tf-rel{margin:0;font-size:.75rem;line-height:1.125rem;color:var(--text-secondary)}
.tf-rel .num{white-space:nowrap}
.lf-full{align-self:flex-start;margin:-6px 0 -8px -4px}
.term-note{border-top-color:var(--term-line)}
@media (min-width:760px){
  .term-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .term-focus{border-top:0;border-left:1px solid var(--term-line)}
}
/* Dar kart (liste 420 px altı: telefon, tablet ve 1100-1199 px masaüstünde 8/12 sütun): fiyat ve 1 dk değişim
   üst üste, eğilim çizgisi 56 px; ad sütunu okunur kalır. Kartın gerçek genişliğine bakar (container query). */
@container lf-left (max-width:420px){
  .lf-cols,.lf-row{grid-template-columns:minmax(0,1fr) 56px auto;gap:10px}
  .lf-sp{width:56px}
  .lf-c-d{display:none}
  .lf-l-long{display:none}.lf-l-short{display:inline}
  .lf-row{grid-template-areas:"nm sp px" "nm sp d";row-gap:0;padding-top:4px;padding-bottom:4px}
  .lf-nm{grid-area:nm}.lf-sp{grid-area:sp}.lf-px{grid-area:px;align-self:end}.lf-d{grid-area:d;align-self:start;justify-content:flex-end;flex-direction:row;gap:6px;min-width:8rem}
}
@container lf-focus (max-width:340px){
  .lf-last{font-size:1.375rem;line-height:1.75rem}
}
@media (prefers-reduced-motion:reduce){.lf-sp-l,.lf-ch-l{transition:none}}
}

/* =========================================================
   5. Piyasa Pusulası
   ========================================================= */
/* Kategoriler kendi yüksekliklerinde durur: eskiden `flex:1` + `justify-content:space-around` ile kartın boyuna
   yayılıyor, kategoriler arasında devasa boşluklar açılıyordu. */
.cp-list{list-style:none;margin:0;padding:8px 16px;display:flex;flex-direction:column;justify-content:flex-start}
.cp-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "b b";gap:8px 12px;padding:12px 0}
.cp-list li+li{border-top:1px solid var(--line)}
.cp-k{grid-area:k;display:flex;flex-direction:column;min-width:0}
.cp-k b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.cp-k small{font-size:.75rem;line-height:1rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-v{grid-area:v;align-self:center}
.cp-bar{grid-area:b;position:relative;height:8px;border-radius:4px;background:var(--chip-bg)}
.cp-bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--text-tertiary);opacity:.6}
/* iki yarım: artı sağa, eksi sola büyür. Genişlik değil scaleX değişir (layout yok). */
.cp-bar i{position:absolute;top:0;bottom:0;width:50%;border-radius:4px;transition:transform 700ms var(--m-inout)}
.cp-bar .cp-pos{left:50%;transform-origin:left;background:linear-gradient(90deg,color-mix(in srgb,var(--up) 40%,transparent),var(--up))}
.cp-bar .cp-neg{right:50%;transform-origin:right;background:linear-gradient(270deg,color-mix(in srgb,var(--down) 40%,transparent),var(--down))}
.m-js .rv:not(.rv-in):not(.rv-done) .cp-bar i{transform:scaleX(0)!important}
.rv-in:not(.rv-done) .cp-bar i{transition-delay:240ms}

/* =========================================================
   6. İçerik: görsel dili (gradyan + soyut desen), Deep Look, makaleler, haberler
   ========================================================= */
.art{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;background:var(--g-blue)}
.art::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--art-grain) 0 0/240px 240px}
.art-p{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;z-index:-1;transition:transform 600ms var(--ease)}
.g-blue{background:var(--g-blue);color:var(--g-blue-ink)}
.g-cyan{background:var(--g-cyan);color:var(--g-cyan-ink)}
.g-green{background:var(--g-green);color:var(--g-green-ink)}
.g-violet{background:var(--g-violet);color:var(--g-violet-ink)}
.g-amber{background:var(--g-amber);color:var(--g-amber-ink)}
.art-logo{width:22px;height:22px;fill:var(--art-logo);opacity:.9}
.achip{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:var(--achip-bg);border:1px solid var(--achip-bd);color:var(--achip-ink);font:600 .75rem/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.achip-sym{font-family:var(--font-mono);letter-spacing:.02em}
.ai-tag{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;line-height:1rem;font-weight:500;color:var(--action-text)}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}

/* Deep Look */
.dl-body{display:grid;gap:0;flex:1}
.dl-lead{display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;margin:16px;padding:20px;color:inherit;text-decoration:none;border:1px solid var(--art-bd)}
.dl-lead .art-p{height:70%;opacity:.9}
.dl-lead .meta{color:var(--text-secondary)}
.dl-lead::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--dl-scrim)}
.dl-in{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dl-title{font-size:1.25rem;line-height:1.75rem;font-weight:700;letter-spacing:-.015em;color:var(--dl-ink);text-wrap:balance}
.dl-dek{font-size:.875rem;line-height:1.25rem;color:var(--text-secondary);max-width:62ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dl-lead:hover .art-p{transform:translateY(-6px) scale(1.02)}
.dl-lead:hover .dl-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dl-list{list-style:none;margin:0;padding:0 16px 8px;display:flex;flex-direction:column}
.dl-list li+li{border-top:1px solid var(--line)}
.dl-list a{display:flex;flex-direction:column;gap:8px;padding:16px 4px;color:inherit;text-decoration:none}
.dl-t{font-size:1rem;line-height:1.5rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t-fast) var(--ease)}
.dl-list a:hover .dl-t{color:var(--action-text)}
@media (min-width:1000px){
  .dl-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .dl-lead{min-height:340px;margin:20px 0 20px 20px;padding:28px}
  .dl-title{font-size:1.5rem;line-height:2rem}
  .dl-list{justify-content:center;padding:8px 20px 8px 28px}
}

/* makaleler */
.cards{list-style:none;margin:0;padding:16px;display:grid;gap:24px 20px;grid-template-columns:minmax(0,1fr)}
.card-a{display:flex;flex-direction:column;gap:12px;height:100%;color:inherit;text-decoration:none}
.card-a .art{height:148px;flex:none;border:1px solid var(--art-bd)}
.art-top{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.achip-cat{position:absolute;left:12px;bottom:12px}
.card-b{display:flex;flex-direction:column;gap:8px;flex:1}
.card-t{font-size:1.125rem;line-height:1.5rem;font-weight:600;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t-fast) var(--ease)}
.card-x{font-size:.875rem;line-height:1.25rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-b .ai-tag{margin-top:auto}
.card-a:hover .card-t{color:var(--action-text)}
.card-a:hover .art-p{transform:translateY(-4px) scale(1.03)}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.cards{grid-template-columns:repeat(4,minmax(0,1fr));padding:20px}}

/* haberler */
.nw-list{list-style:none;margin:0;padding:0 16px;flex:1}
.nw-list li+li{border-top:1px solid var(--line)}
.nw-list a{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;color:inherit;text-decoration:none}
.nw-art{height:64px;border-radius:10px}
.nw-art .art-logo{position:absolute;left:8px;top:8px;width:16px;height:16px}
.nw-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.nw-cat{color:var(--text-secondary);font-weight:600}
.nw-t{font-size:1rem;line-height:1.375rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t-fast) var(--ease)}
.nw-x{font-size:.875rem;line-height:1.25rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nw-list a:hover .nw-t{color:var(--action-text)}
@media (min-width:600px){.nw-list a{grid-template-columns:136px minmax(0,1fr);gap:16px}.nw-art{height:88px}.nw-art .art-logo{width:20px;height:20px}}

/* =========================================================
   7. Ekonomik takvim
   ========================================================= */
.cal-state{display:flex;gap:8px;align-items:flex-start;margin:12px 16px 0;padding:10px 12px;border-radius:10px;background:var(--warn-tint);color:var(--text-secondary);font-size:.75rem;line-height:1.125rem}
.cal-state svg{color:var(--warn);flex:none;margin-top:1px}
.cal-list{list-style:none;margin:0;padding:4px 16px 8px;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
.cal-list li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:12px;padding:12px 0}
.cal-list li+li{border-top:1px solid var(--line)}
.cal-when{display:flex;flex-direction:column;font:600 .875rem/1.25rem var(--font-num)}
.cal-when small{font:500 .75rem/1rem var(--font-sans);color:var(--text-tertiary)}
.cal-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.cal-t{display:flex;align-items:center;gap:8px;min-width:0;font-size:.875rem;line-height:1.25rem}
.cal-t b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-t .cur{flex:none;font:600 .75rem/1 var(--font-mono);padding:4px 6px;border-radius:4px;background:var(--chip-bg);color:var(--text-secondary)}
.cal .imp{display:inline-flex;gap:2px;flex:none}
.cal .imp i{width:6px;height:10px;border-radius:2px;background:var(--border-control);opacity:.5}
.cal .imp.l3 i{background:var(--down);opacity:1}
.cal .imp.l2 i:nth-child(-n+2){background:var(--warn);opacity:1}
.cal .imp.l1 i:first-child{background:var(--text-tertiary);opacity:1}
.cal-v{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.cal-v b{color:var(--text-primary);font-weight:600;font-family:var(--font-num)}

/* =========================================================
   8. Topluluk
   ========================================================= */
.cm-empty{display:grid;gap:20px;padding:20px 16px}
.cm-big{margin:0;font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.cm-sub{margin:8px 0 16px;max-width:60ch;color:var(--text-secondary);font-size:.875rem;line-height:1.375rem}
.cm-rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;align-self:start}
.cm-rooms a{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;background:var(--bg-surface);color:inherit;text-decoration:none;transition:background var(--t-fast) var(--ease)}
.cm-rooms a:hover{background:var(--bg-raised)}
.cr-n{display:flex;flex-direction:column;min-width:0;flex:1}
.cr-n b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.cr-n small{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.cm-list{list-style:none;margin:0;padding:0 16px}
.cm-list li+li{border-top:1px solid var(--line)}
.cm-list a{display:flex;flex-direction:column;gap:4px;padding:12px 0;color:inherit;text-decoration:none}
.cm-meta{display:flex;gap:8px;font-size:.75rem;color:var(--text-tertiary)}
.cm-meta b{color:var(--text-primary)}
.cm-x{font-size:.875rem;color:var(--text-secondary)}
/* Yazar adı profil bağlantısıdır (Social): gönderi metni ve yazar ayrı bağlantı, iç içe <a> yok. */
.cm-list li.cm-it{display:flex;flex-direction:column;gap:4px;padding:12px 0}
.cm-list .cm-it a{display:inline;padding:0}
.cm-list .cm-it .cm-x{display:block;color:var(--text-secondary)}
.cm-list .cm-it .cm-x:hover{color:var(--text-primary)}
.cm-who{font-weight:600;color:var(--text-primary)}
.cm-who:hover{text-decoration:underline}
@media (min-width:900px){
  .cm-empty{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:28px 24px}
  .cm-big{font-size:1.5rem;line-height:2rem}
  .cm-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =========================================================
   9. Özellik vitrini
   ========================================================= */
.feat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.feat-list li{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--bg-surface);min-width:0;transition:background var(--t-mid) var(--ease)}
.feat-list li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--onn-1),var(--onn-4));transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.feat-list li:hover{background:var(--bg-raised)}
.feat-list li:hover::before{transform:scaleX(1)}
.feat-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--onn-2) 14%,transparent);color:var(--onn-2);margin-bottom:4px}
:root[data-theme="light"] .feat-ic{color:var(--action-text);background:var(--action-tint)}
.feat-list h3{margin:0;font-size:1.125rem;line-height:1.5rem;font-weight:600}
.feat-list p{margin:0;font-size:.875rem;line-height:1.375rem;color:var(--text-secondary);flex:1}
.feat-d{font:500 .75rem/1rem var(--font-mono);color:var(--text-tertiary)}
@media (min-width:600px){
  .feat-list{grid-template-columns:repeat(6,minmax(0,1fr))}
  .feat-list li{grid-column:span 2}
  .feat-list li:nth-child(-n+2){grid-column:span 3}
}
@media (min-width:1200px){
  .feat-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .feat-list li,.feat-list li:nth-child(-n+2){grid-column:auto}
}

/* =========================================================
   10. Seans şeridi: 24 saatlik ORTAK zaman şeridi
   Beş durağan kart yerine tek eksen. Konumlar bir UTC gününün yüzdesidir (--a başlangıç, --b bitiş,
   --n "şimdi"), bu yüzden saat diliminden bağımsızdır; etiketleri istemci kullanıcının saatine çevirir.
   Çakışma pencereleri (--a/--b, iki ve daha çok borsa açık) bantların ARKASINDA sütun olarak durur.
   Açık/kapalı renkle DEĞİL metinle söylenir; renk yalnız aynı bilgiyi hızlandırır.
   ========================================================= */
/* Seans renkleri AYRI bir ailedir: açık/kapalı ile yükseliş/düşüş karıştırılmaz. Yeşil ve kırmızı yalnız
   fiyat yönüne ayrılmıştır (kullanıcı bunları ters çevirebilir, .updown-swap); seans bandı marka mavisi,
   öğle arası uyarı sarısı, kapalı yüzey grisidir. Değerler tema tokenlarından türetilir, sabit renk yok. */
:root{
  --sx-rail:var(--bg-raised);
  --sx-hatch:repeating-linear-gradient(45deg,transparent 0 3px,var(--sx-break) 3px 6px);
  --sx-open:color-mix(in srgb,var(--action-text) 78%,var(--bg-surface));
  --sx-break:color-mix(in srgb,var(--warn) 62%,transparent);
  --sx-ov2:color-mix(in srgb,var(--action-text) 13%,transparent);
  --sx-ov3:color-mix(in srgb,var(--action-text) 26%,transparent);
}
.sx{--sx-n:8rem;--sx-s:0px;--sx-g:12px;
  display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--panel-bg);box-shadow:var(--panel-shadow)}
.sx-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.sx-t{display:flex;align-items:center;gap:8px;margin:0;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--text-primary)}
.sx-q{margin:0;font-size:.8125rem;line-height:1.25rem;color:var(--text-tertiary)}
.sx-key{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 0 auto;padding:0;font-size:.75rem;line-height:1rem;color:var(--text-secondary)}
.sx-key li{display:inline-flex;align-items:center;gap:6px}
.sx-key i{display:block;width:14px;height:10px;border-radius:3px;flex:none}
.k-open{background:var(--sx-open)}
.k-break{background:var(--sx-rail);background-image:var(--sx-hatch);box-shadow:inset 0 0 0 1px var(--line)}
.k-closed{background:var(--sx-rail);box-shadow:inset 0 0 0 1px var(--line)}
.k-ov{background:var(--sx-ov3)}
.sx-peak{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font-size:.8125rem;line-height:1.25rem;color:var(--text-secondary)}
.sx-peak b{color:var(--text-primary);font-weight:600}
.sx-peak .num{font-family:var(--font-num);color:var(--text-primary);font-weight:600}
.sx-peak-n{color:var(--text-tertiary)}

.sx-plot{position:relative;padding-top:18px}
/* Arka katman: saat çizgileri, çakışma sütunları ve "şimdi" imleci tam olarak bant sütununa oturur. */
.sx-lane{position:absolute;top:0;bottom:16px;left:calc(var(--sx-n) + var(--sx-g));right:var(--sx-s);pointer-events:none}
.sx-grid{position:absolute;inset:0}
.sx-grid i{position:absolute;top:14px;bottom:0;left:calc(var(--x) * 100%);width:1px;background:var(--line)}
.sx-ov{position:absolute;top:14px;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--sx-ov2);
  box-shadow:inset 1px 0 0 var(--border-subtle),inset -1px 0 0 var(--border-subtle)}
.sx-ov3{background:var(--sx-ov3)}
.sx-now{position:absolute;top:0;bottom:0;left:calc(var(--n) * 100%);width:2px;margin-left:-1px;background:var(--text-primary);border-radius:1px;
  transition:left 900ms var(--m-inout)}
.sx-now::before{content:"";position:absolute;top:0;left:50%;width:7px;height:7px;border-radius:50%;background:var(--text-primary);transform:translate(-50%,-50%)}

.sx-rows{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sx-row{display:grid;grid-template-columns:var(--sx-n) minmax(0,1fr);gap:2px var(--sx-g);align-items:center;padding:7px 0;min-height:44px}
.sx-row+.sx-row{border-top:1px solid var(--line)}
.sx-n{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0}
.sx-n b{font-size:.875rem;line-height:1.25rem;font-weight:600}
.sx-n small{font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.sx-track{grid-column:2;grid-row:1;position:relative;height:22px;border-radius:4px;background:var(--sx-rail);box-shadow:inset 0 0 0 1px var(--line)}
.sx-b{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-radius:4px}
.sx-open{background:var(--sx-open)}
/* Öğle arası AYRI bir renk değil, bandın kesilmesidir: açık bantla arasındaki parlaklık farkı seansın
   kapalı rayıyla aynıdır (ölçüldü: 3,4 aydınlık / 4,3 karanlık), iki mavi tonunu ayırt etmeye gerek kalmaz.
   Eğik tarama "kapalı" ile karışmasını önler. */
.sx-break{background:var(--sx-rail);background-image:var(--sx-hatch);border-radius:0;box-shadow:inset 0 0 0 1px var(--line)}
.sx-st{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding-top:3px;
  font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.sx-chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.sx-chip .dot{width:7px;height:7px;background:var(--text-tertiary);box-shadow:none}
/* "Açık" marka mavisidir, yeşil DEĞİL: yeşil ve kırmızı yalnız fiyat yönüne ayrılmıştır ve kullanıcı
   bunları ters çevirebilir (.updown-swap); o zaman "açık" kırmızı görünürdü. Bant rengiyle aynı aileden. */
.ss-open .sx-chip{color:var(--action-text)}
.ss-open .sx-chip .dot{background:var(--action-text);box-shadow:0 0 0 3px var(--action-tint)}
.ss-break .sx-chip{color:var(--warn)}
.ss-break .sx-chip .dot{background:var(--warn)}
.sx-when{display:inline-flex;flex-wrap:wrap;gap:2px 10px;min-width:0}
.sx-loc{font-family:var(--font-mono);color:var(--text-secondary)}
.sx-row:hover .sx-track,.sx-row:focus-within .sx-track{box-shadow:inset 0 0 0 1px var(--border-control)}

.sx-axis{position:relative;list-style:none;margin:6px 0 0 calc(var(--sx-n) + var(--sx-g));padding:0;height:16px;margin-right:var(--sx-s)}
.sx-axis li{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);font:500 .75rem/1rem var(--font-mono);color:var(--text-tertiary);white-space:nowrap}
.sx-axis li:first-child{transform:none}
.sx-axis li:last-child{transform:translateX(-100%)}
.sx-note{margin:0;font-size:.75rem;line-height:1rem;color:var(--text-tertiary)}
.sx-note b{font-weight:600;color:var(--text-secondary)}

/* Telefon ve küçük tablet: ad üstte, şerit tam genişlikte, durum altta. Eksen de tam genişliğe oturur. */
@media (max-width:899px){
  .sx{--sx-n:0px;--sx-g:0px;padding:12px 14px}
  .sx-key{margin-left:0}
  .sx-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .sx-n{grid-column:1;grid-row:1;flex-direction:row;align-items:baseline;gap:8px}
  .sx-track{grid-column:1;grid-row:2}
  .sx-st{grid-column:1;grid-row:3}
  .sx-axis{margin-left:0}
  .sx-axis li:nth-child(even){display:none}
}
/* Geniş ekranda üç sütun: ad | şerit | durum. Satır tek satıra iner, kart içeriği kadar yer kaplar. */
@media (min-width:1100px){
  .sx{--sx-s:calc(15rem + var(--sx-g))}
  .sx-row{grid-template-columns:var(--sx-n) minmax(0,1fr) calc(var(--sx-s) - var(--sx-g));align-items:center}
  .sx-st{grid-column:3;grid-row:1;padding-top:0;justify-content:flex-start;align-content:center}
  .sx-when{flex:1 1 auto}
}

/* =========================================================
   HAREKET DİLİ (docs/TASARIM-YONU-v1esinli.md "Hareket dili")
   Yalnız transform ve opacity canlandırılır. Eğriler: --m-out giriş ve veri, --m-inout ekranda yer
   değiştiren değer, --m-soft sönme. Süreler: 160 geri bildirim, 240 hover, 380 rakam, 560 bölüm, 600-700 çubuk.
   prefers-reduced-motion: priceonn.css tüm animasyon ve geçişleri kapatır; burada gizli başlangıç durumları da
   kaldırılır, veri güncellemeleri anında yansır (motion.js ayrıca denetler).
   ========================================================= */
:root{
  --m-out:cubic-bezier(.23,1,.32,1);      /* güçlü ease-out: giriş, veri güncellemesi */
  --m-inout:cubic-bezier(.65,0,.35,1);    /* ekranda kayan çubuk ve işaretler */
  --m-soft:cubic-bezier(.16,1,.3,1);      /* uzun sönme, bölüm girişi */
  --m-glow-up:color-mix(in srgb,var(--up) 22%,transparent);
  --m-glow-down:color-mix(in srgb,var(--down) 22%,transparent);
}

/* ---------- 1. bölüm girişleri: kaydırdıkça bir kez, hafif yukarı kayarak ----------
   html.m-js theme-boot.js'te (ilk boyamadan önce) eklenir; motion.js 2,5 sn içinde çalışmazsa geri alınır.
   Betik yoksa hiçbir şey gizlenmez. */
.m-js .rv:not(.rv-in):not(.rv-done){opacity:0;transform:translateY(16px)}
.rv.rv-in:not(.rv-done){animation:m-rise 560ms var(--m-soft) var(--rv-d,0ms) both}
.m-js .rv:not(.rv-in):not(.rv-done) .stg>*{opacity:0}
.rv-in:not(.rv-done) .stg>*{animation:m-rise-sm 420ms var(--m-out) calc(var(--rv-d,0ms) + 90ms + var(--i,0) * 45ms) both}
@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-rise-sm{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-fade-out{from{opacity:1}to{opacity:0}}

/* ---------- 2. fiyat güncellemesi: rakam dönmesi + yönlü, sönen vurgu ----------
   Değişen her hane iki katmanlı bir rulo olur (yeni hane akışta, eski hane üstünde mutlak); sabit genişlikli
   rakamlar sayesinde yerleşim kaymaz. Vurgu arka plan rengi değil, opaklığı sönen bir katmandır. */
[data-price]{position:relative;isolation:isolate;font-variant-numeric:tabular-nums}
[data-price]::after{content:"";position:absolute;inset:-1px -4px;border-radius:5px;z-index:-1;opacity:0;pointer-events:none;background:var(--m-glow-up)}
[data-price].m-dn::after{background:var(--m-glow-down)}
[data-price].m-hit::after{animation:m-hit 900ms var(--m-soft) both}
@keyframes m-hit{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.od{position:relative;display:inline-block;clip-path:inset(0 -2px)}
.od>i{font-style:normal;display:inline-block}
.od>i+i{position:absolute;left:0;top:0}
.po-flash-up,.po-flash-down{animation:none}

/* ---------- 3. canlı nabız: nokta yerinde durur, çevresindeki halka büyüyüp söner (transform + opacity) ---------- */
.dot{position:relative}
.m-live::after,.st-pill.st-live::after,.tk-lbl .dot::after,.term-live .dot::after,.ss-open .dot::after{content:"";position:absolute;border-radius:50%;background:var(--up);pointer-events:none;
  animation:m-ring 2.4s var(--m-soft) infinite}
.tk-lbl .dot::after,.term-live .dot::after,.ss-open .dot::after,.m-live::after{inset:0}
.ss-open .sx-chip .dot::after{background:var(--action-text)}
.st-pill{position:relative}
.st-pill.st-live::after{left:8px;top:50%;width:6px;height:6px;margin-top:-3px}
@keyframes m-ring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3);opacity:0}}
.hero-off .st-pill.st-live::after,.hero-off .tk-lbl .dot::after,.term-off .term-live .dot::after{animation-play-state:paused}

/* ---------- 4. hero: spot kartı, spark, canlı nokta ---------- */
.spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 55%,transparent),0 0 28px -4px color-mix(in srgb,var(--up) 45%,transparent)}
.spot.m-dn::after{box-shadow:0 0 0 1px color-mix(in srgb,var(--down) 55%,transparent),0 0 28px -4px color-mix(in srgb,var(--down) 45%,transparent)}
.spot.m-hit::after{animation:m-hit 1100ms var(--m-soft) both}
.spark-wrap{position:relative;margin-top:12px}
.spark-wrap .spot-spark{margin-top:0}
.spark-dot{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:currentColor;color:var(--text-tertiary);pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.spark-dot.s-up{color:var(--up)}.spark-dot.s-down{color:var(--down)}
.spark-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:m-ring 2.4s var(--m-soft) infinite}
.hero-off .spark-dot::after{animation-play-state:paused}
.spark-dot[hidden]{display:none}

/* ---------- 5. kartlar: yalnız fareli cihazlarda hafif kalkma + kenar ışıması ---------- */
.card-a .art,.dl-lead,.spot-mini{position:relative}
.card-a .art::after,.dl-lead::before,.spot-mini::after,.tl-cell::after,.cm-rooms a::after,.feat-list li::after,.mk-row::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),0 0 24px -8px color-mix(in srgb,var(--onn-2) 60%,transparent);
  transition:opacity 240ms var(--m-out)}
.tl-cell,.cm-rooms a,.mk-row{position:relative}
@media (hover:hover) and (pointer:fine){
  .card-a,.dl-lead,.spot-mini{transition:transform 240ms var(--m-out)}
  .card-a:hover,.spot-mini:hover{transform:translateY(-3px)}
  .dl-lead:hover{transform:translateY(-2px)}
  .card-a:hover .art::after,.dl-lead:hover::before,.spot-mini:hover::after,.tl-cell:hover::after,.cm-rooms a:hover::after,.feat-list li:hover::after,.mk-row:hover::after{opacity:1}
  .card-a:active,.spot-mini:active{transform:translateY(-1px) scale(.99);transition-duration:120ms}
}
.dl-lead::before{z-index:0}

/* ---------- 6. seans şeridi: durum değişiminde yumuşak geçiş (yalnız opaklık), "şimdi" imleci kayar ---------- */
.sx-chip,.sx-rest{transition:opacity 220ms var(--m-soft)}
.ss-swap .sx-chip,.ss-swap .sx-rest{opacity:0}

/* ---------- 7. grafik: son fiyat nabzı (.pc-live) css/chart.css içinde ---------- */

/* hareket azaltıldığında: gizli başlangıç yok, dekoratif döngü yok (priceonn.css geri kalanını kapatır) */
@media (prefers-reduced-motion:reduce){
  .m-js .rv:not(.rv-in):not(.rv-done),.m-js .rv:not(.rv-in):not(.rv-done) .stg>*{opacity:1;transform:none}
  .m-js .rv:not(.rv-in):not(.rv-done) .cp-bar i{transform:none!important}
  .card-a:hover,.spot-mini:hover,.dl-lead:hover{transform:none}
}

/* Hero slayt üst başlığı (content/hero-slaytlar.json: eyebrow). 12 px, iki temada --action-text (AA). */
.hs-eyebrow{display:block;margin:0 0 12px;font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--action-text)}

/* Telefonda önce fiyat (TASARIM-PLANI 2.1): hero tek sütunken kart metnin üstüne çıkar. HTML sırası değişmez;
   H1 ve metin DOM'da önce kalır (SEO ve ekran okuyucu). Tablet ve masaüstünde yan yana düzen aynen sürer. */
@media (max-width:999px){
  .hs-slide .hero-grid{gap:20px}
  .hs-slide .spot{order:-1}
  .hs-slide .hero-lead{margin-top:12px}
  .hs-slide .hero-cta{margin-top:18px}
}
@media (max-width:599px){
  .hero .hs-title{font-size:2rem;line-height:1.15}
  .hs-slide .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .hs-slide .hero-fine{display:none}
}

/* ---------- grafik: aynı sayfada tam ekran (home.js; sembol sayfası symbol.css .sc-max) ----------
   Panel görüntü alanını kaplar; site başlığı z 40 olduğundan 42. Bölüm girişi (.rv) kalıcı transform bırakır,
   transform'lu ata sabit konumlu paneli kendine hapseder: tam ekranda kaldırılır. */
:root.ch-max-on,:root.ch-max-on body{overflow:hidden}
:root.ch-max-on .pn-chart,:root.sc-max-on .pn-chart{transform:none!important;animation:none!important;transition:none!important}
.ch-panel.ch-max{position:fixed;inset:0;z-index:42;background:var(--bg-surface);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.ch-max .ch-wrap{flex:1 1 auto;min-height:0}
.ch-max .ch-canvas{height:100%}
.ch-max .ch-wbtn{display:none}
.ch-full[aria-pressed="true"]{background:color-mix(in srgb,var(--onn-2) 22%,transparent);border-color:var(--onn-2)}