/* ==== extracted from templates/gundem.html (T2.5) ==== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* r155 bug-hunt: DEV2-T-MOBOVF-1 ile ayni sinif — hisse.css/index.css/portfolio.css
emsaliyle ayni yatay-tasma guard'i eksikti. */
html { overflow-x: clip; }
body {
-webkit-font-smoothing: antialiased; font-size: var(--bp-text-md); min-height: 100vh;
overflow-x: clip;
}
header {
background: var(--bp-surface); border-bottom: 1px solid var(--bp-border);
padding: 14px 24px; display: flex; align-items: center; gap: 16px;
position: sticky; top: calc(32px + env(safe-area-inset-top,0px)); z-index:var(--bp-z-dropdown);
}
.page-title { font-size: var(--bp-text-2xl); font-weight: 700; }
.page-sub { font-size: var(--bp-text-sm); color: var(--bp-text3); margin-top: 1px; }
.container { max-width: var(--bp-container-1100); margin: 0 auto; padding: 24px; }
/* ── Stats Row ── */
.stats-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
margin-bottom: 28px;
}
/* Gövde reçetesi (degrade + kenarlık + radius-20 + parıltı) data-art.css
`.da-panel`'den gelir — şablonda `class="da-panel stat-card"`. */
.stat-card {
padding: 18px 16px; text-align: center;
transition: border-color .15s;
}
.stat-card:hover { border-color: var(--bp-border2); }
.stat-num { font-size: var(--bp-text-36); font-weight: 800; line-height: 1; }
.stat-lbl { font-size: var(--bp-text-xs); color: var(--bp-text3); margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; }
.num-al { color: var(--bp-al); }
.num-sat { color: var(--bp-sat); }
.num-bkl { color: var(--bp-bkl); }
.num-tot { color: var(--bp-text); }
/* ── Section ── */
.section { margin-bottom: 28px; }
.section-hdr {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.section-title {
font-size: var(--bp-text-md); font-weight: 700; color: var(--bp-text);
display: flex; align-items: center; gap: 7px;
}
.section-title .dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.dot-al { background: var(--bp-al); box-shadow: 0 0 6px rgba(var(--bp-al-rgb),.5); }
.dot-str { background: var(--accent); box-shadow: 0 0 6px rgba(var(--bp-brand-rgb),.5); }
.section-sub { font-size: var(--bp-text-xs); color: var(--bp-text3); }
/* ── Stock Cards ── */
.stock-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.stock-card {
background: var(--bp-surface); border: 1px solid var(--bp-border);
border-radius: var(--bp-radius); padding: 14px 16px; text-decoration: none; color: inherit;
display: block; transition: all .15s; position: relative; overflow: hidden;
}
.stock-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--card-accent, var(--bp-bkl)); border-radius: 3px 0 0 3px;
}
.stock-card.al { --card-accent: var(--bp-al); }
.stock-card.sat { --card-accent: var(--bp-sat); }
@media (hover: hover) and (pointer: fine) {
.stock-card:hover { border-color: var(--bp-border2); background: var(--bp-surface2); transform: translateY(-1px); }
}
.sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sc-top > div:first-child { min-width: 0; }
.sc-ticker { font-size: var(--bp-text-lg); font-weight: 800; font-family: var(--bp-font-mono); }
.sc-name { font-size: var(--bp-text-xs); color: var(--bp-text3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px;
border-radius: var(--bp-radius-20); font-size: var(--bp-text-2xs); font-weight: 600; letter-spacing: .3px;
text-transform: uppercase; white-space: nowrap;
}
.badge.al { background: rgba(var(--bp-al-rgb),.12); color:var(--bp-al); border:1px solid rgba(var(--bp-al-rgb),.3); }
.badge.sat { background: rgba(var(--bp-sat-rgb),.12); color:var(--bp-sat); border:1px solid rgba(var(--bp-sat-rgb),.3); }
.badge.bkl { background: rgba(var(--bp-text3-rgb),.1); color:var(--bp-bkl); border:1px solid rgba(var(--bp-text3-rgb),.2); }
.sc-metrics {
display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.sc-metric { font-size: var(--bp-text-xs); color: var(--bp-text3); }
.sc-metric strong { color: var(--bp-text2); font-weight: 600; }
.sc-footer {
display: flex; align-items: center; justify-content: space-between; margin-top: 10px;
}
.sc-price { font-size: var(--bp-text-md); font-weight: 700; font-family: var(--bp-font-mono); }
.sc-chg { font-size: var(--bp-text-xs); font-weight: 600; }
.sc-chg.up { color: var(--bp-al); }
.sc-chg.dn { color: var(--bp-sat); }
.sc-chg.neu { color: var(--bp-text3); }
.sc-arrow { font-size: var(--bp-text-xs); color: var(--accent); font-weight: 600; }
/* ── New signal highlight ── */
.stock-card.new-signal {
border-color: rgba(var(--bp-al-rgb),.4);
background: rgba(var(--bp-al-rgb),.04);
}
.stock-card.new-signal.sat {
border-color: rgba(var(--bp-sat-rgb),.4);
background: rgba(var(--bp-sat-rgb),.04);
}
.new-badge {
display: inline-block; font-size: var(--bp-text-sm); font-weight: 700;
background: rgba(var(--bp-al-rgb),.2); color: var(--bp-al); border-radius:var(--bp-radius-sm);
padding: 1px 5px; text-transform: uppercase; letter-spacing: .5px; margin-left: 4px;
}
.sat .new-badge { background: rgba(var(--bp-sat-rgb),.2); color: var(--bp-sat); }
/* ── Empty state ── */
.empty-box {
background: var(--bp-surface); border: 1px solid var(--bp-border);
border-radius: var(--bp-radius); padding: 28px; text-align: center;
color: var(--bp-text3); font-size: var(--bp-text-base);
}
/* ── Skeleton ── */
.skeleton {
background: linear-gradient(90deg, var(--bp-surface) 25%, var(--bp-surface2) 50%, var(--bp-surface) 75%);
background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--bp-radius-4);
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.sk-card { height: 100px; border-radius: var(--bp-radius); }
/* ── Responsive ── */
@media (max-width: 640px) {
header { padding: 12px 16px; }
.container { padding: 16px; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.stat-num { font-size: var(--bp-text-28); }
.stock-grid { grid-template-columns: 1fr; }
.page-title { font-size: var(--bp-text-lg); }
}
/* ── Makro Ticker Bandı ── */
.macro-bar {
background:var(--bp-bg); border-bottom:1px solid var(--bp-border);
min-height:32px; padding-top:env(safe-area-inset-top,0px); overflow:hidden; position:sticky; top:0; z-index:var(--bp-z-sticky); white-space:nowrap;
}
.macro-bar::before, .macro-bar::after {
content:''; position:absolute; top:0; bottom:0; width:60px;
pointer-events:none; z-index:var(--bp-z-raised);
}
.macro-bar::before { left:0; background:linear-gradient(to right,var(--bp-bg),transparent); }
.macro-bar::after { right:0; background:linear-gradient(to left,var(--bp-bg),transparent); }
.macro-track {
display:inline-flex; align-items:center;
animation:macroScroll 40s linear infinite;will-change:transform; height:32px;
}
.macro-bar:hover .macro-track { animation-play-state:paused; }
@keyframes macroScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.macro-pause-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); z-index: var(--bp-z-local-control); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: inherit; opacity: .55; font-size: var(--bp-text-sm); line-height: 1; cursor: pointer; padding: 0; }
.macro-pause-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); }
.macro-pause-btn:hover, .macro-pause-btn:focus-visible { opacity: 1; }
.macro-bar[data-paused="true"] .macro-track { animation-play-state: paused !important; }
.macro-item {
display:inline-flex; align-items:center; gap:8px;
padding:0 20px; border-right:1px solid var(--bp-border);
font-size:var(--bp-text-sm); height:32px; text-decoration:none; color:inherit;
}
.macro-item-lbl { font-weight:600; color:var(--bp-text2); }
.mc-pos { color:var(--bp-al); } .mc-neg { color:var(--bp-sat); } .mc-neu { color:var(--bp-text3); }
/* CPO-DEV2-104: ikincil/arşiv icerik toggle — hisse.css'teki (CPO-DEV2-098)
.bp-detail-toggle deseniyle birebir ayni class adlari, sayfalar-arasi tutarlilik */
.bp-detail-toggle { margin-bottom: 20px; }
.bp-detail-toggle-summary {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; list-style: none;
padding: 14px 18px;
background: var(--bp-surface);
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg);
font-size: var(--bp-text-base);
font-weight: 700;
color: var(--bp-text);
user-select: none;
transition: border-color .15s, background .15s;
}
.bp-detail-toggle-summary::-webkit-details-marker { display: none; }
.bp-detail-toggle-summary::marker { content: ""; }
.bp-detail-toggle-summary:hover { border-color: var(--bp-border2); background: rgba(255,255,255,.02); }
.bp-detail-toggle-chev { color: var(--bp-text3); font-size: var(--bp-text-sm); transition: transform .2s ease; }
.bp-detail-toggle[open] .bp-detail-toggle-chev { transform: rotate(180deg); }
.bp-detail-toggle-body { padding-top: 16px; }
/* ══ Data-Art dil aktarımı — gundem.html (20.09, Pazar) ══
hisse.html + tarama.html + sektor_harita.html + portfoy.html bitti (bkz. memory
project_data_art_kapsamli_donusum_baslangici_18_09); sıradaki yüksek-trafik
sayfa burası. Bu sayfaya bugüne kadar HİÇ Data-Art dokunmamıştı: her yüzey düz
--bp-surface + --bp-radius, bölüm başlıkları jenerik kalın metin, mikro-etiketler
.5px tracking'li sistem fontu. Yani ana sayfadan /gundem'e geçen kullanıcı iki
ayrı ürüne bakıyordu.
Reçete index.html (.da-eyebrow / .da-recap-panel) + hisse.css'ten birebir ödünç:
degrade gövde (surface→surface2), radius-20, Space Grotesk + geniş tracking
mikro-etiketler, violet radial glow.
DOKUNULMAYAN (bilinçli):
(a) .stock-card::before sol şerit — FONKSİYONEL (sinyal rengi taşıyor),
(b) .new-signal yeşil/kırmızı zemin tintı — "bugün değişti" işareti, renk
semantiği,
(c) .bp-detail-toggle-summary — hisse.css'teki emsaliyle birebir aynı kalması
gerekiyor (sayfalar-arası tek dil); ikisini birlikte dönüştürmek ayrı bir
tur, burada tek sayfayı ayırmak o tutarlılığı BOZARDI. ══ */
/* 1 ── Mikro-etiketler: bölüm başlıkları + stat etiketleri Space Grotesk'e ve
ana sayfanın .da-eyebrow tracking imzasına (.12em) geçiyor. Renk text2 —
cyan DEĞİL: cyan bu sayfada "Piyasa Haberleri" dot'unun ve KAP linkinin
rengi, başlıkları da cyan yapmak o ayrımı yok ederdi (hisse.css'te aynı
gerekçeyle verilen kararla birebir). */
.section-title {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: var(--bp-text-sm);
font-weight: 700;
color: var(--bp-text2);
text-transform: uppercase;
letter-spacing: .12em;
}
.stat-lbl {
font-family: 'Space Grotesk', system-ui, sans-serif;
letter-spacing: .12em;
}
.section-sub {
font-family: 'Space Grotesk', system-ui, sans-serif;
letter-spacing: .06em;
}
/* Makro Haberler dot'u şablonda ham (token'suz) bir mor hex'ti — kanonik
Data-Art moru DEĞİL, ona yakın ama farklı bir tondu. Token'a alındı, artık
style-guard da görüyor. NOT: hex literalini bu yoruma yazmak style-guard
K-B sayacını tetikliyor (yorum/kod ayrımı yapmıyor, bkz. memory
reference_tokens_css_yorum_ayristirici_tuzagi) — bilinçli olarak yazılmadı. */
.section-title .dot-macro {
background: var(--bp-art-violet);
box-shadow: 0 0 6px rgba(var(--bp-art-violet-rgb),.5);
}
/* 2 ── Özet kartları (Güçlü Trend / Trend Bozuldu / Yatay / Toplam).
20.09: degrade gövde + parıltı ELLE kopyalanmıştı; artık `.da-panel`
ilkeli taşıyor, burada yalnızca parıltının DELTA'sı duruyor. Değerler
önceki elle yazılmış hâlle birebir aynı (violet .12 / 150px / -70% /
-20%) — görsel çıktı değişmiyor, tek kaynak kazanıldı. */
.stat-card {
--da-glow-rgb: var(--bp-art-violet-rgb);
--da-glow-a: .12;
--da-glow-size: 150px;
--da-glow-y: -70%;
--da-glow-x: -20%;
}
.stat-num { letter-spacing: -.025em; }
/* 3 ── Hisse kartları: degrade gövde + radius-20. Sol sinyal şeridi
(::before) radius'a uyacak şekilde güncellendi; hover'da yüzey düzleşmek
yerine kendi aksan rengiyle parlıyor (ana sayfa kart dili). */
.stock-card {
background: linear-gradient(135deg, var(--bp-surface) 0%, var(--bp-surface2) 100%);
border-radius: var(--bp-radius-20);
}
.stock-card::before { border-radius: var(--bp-radius-20) 0 0 var(--bp-radius-20); }
@media (hover: hover) and (pointer: fine) {
.stock-card:hover {
background: linear-gradient(135deg, var(--bp-surface2) 0%, var(--bp-surface) 100%);
box-shadow: 0 18px 40px -24px rgba(var(--bp-art-violet-rgb),.55);
}
}
/* "Bugün" tintı degrade dokuyu koruyarak sinyal rengini taşımaya devam ediyor
(eskiden düz rgba idi — dönüşüm sonrası tek düz kart o olurdu). */
.stock-card.new-signal {
background: linear-gradient(135deg, rgba(var(--bp-al-rgb),.07) 0%, var(--bp-surface2) 100%);
}
.stock-card.new-signal.sat {
background: linear-gradient(135deg, rgba(var(--bp-sat-rgb),.07) 0%, var(--bp-surface2) 100%);
}
.sc-metric {
font-family: 'Space Grotesk', system-ui, sans-serif;
letter-spacing: .04em;
}
.sc-metric strong { font-variant-numeric: tabular-nums; }
.sc-price { font-variant-numeric: tabular-nums; }
.sc-chg { font-variant-numeric: tabular-nums; }
/* 4 ── Boş/hata durumu kutusu.
GERÇEK BUG (canlıda bugün görünür): .empty-box .stock-grid'in İÇİNDE
render ediliyor, grid `repeat(auto-fill, minmax(280px,1fr))` olduğu için
kutu tek bir hücreye sıkışıyordu — "Bugün BIST işlem günü değil…" mesajı
1100px'lik konteynerde ~280px'lik dar bir kart gibi duruyor, sayfanın geri
kalanı boş kalıyordu. Aynı kusur JS hata dallarındaki "Veri yüklenemedi"
kutusunu da vuruyor. Tüm satırı kaplaması gerekiyor. */
.stock-grid .empty-box { grid-column: 1 / -1; }
.empty-box {
background: linear-gradient(135deg, var(--bp-surface) 0%, var(--bp-surface2) 100%);
border-radius: var(--bp-radius-20);
}
/* 5 ── AI Piyasa Özeti paneli: şablondaki uzun inline style buraya taşındı
(token'suz ham mor rgba() değeri kanonik --bp-art-violet-rgb'ye alındı —
style-guard ham renkleri ancak burada görüyor) ve .da-recap-panel dilinde
sol aksan şeridi + radius-20 kazandı. */
/* 20.09: `.da-panel.da-panel--accent` ilkeli gövdeyi + sol şeridi veriyor;
buradaki DELTA panelin kendi cyan→violet tintli zemini, kenarlık rengi ve
iç boşluğu. Şerit rengi artık --da-accent ile (elle border-left DEĞİL). */
.ai-summary-box {
--da-accent: var(--bp-accent-cyan);
--da-glow-rgb: var(--bp-accent-cyan-rgb);
--da-glow-a: .10;
--da-glow-size: 200px;
background: linear-gradient(135deg, rgba(var(--bp-accent-cyan-rgb),.07) 0%, rgba(var(--bp-art-violet-rgb),.05) 100%);
/* DİKKAT: düz `border-color` yazılırsa SOL kenarı da ezer ve
`.da-panel--accent`in 3px cyan şeridini soluklaştırır (gundem.css
data-art.css'ten SONRA yükleniyor). Yalnızca 3 kenar. */
border-top-color: rgba(var(--bp-accent-cyan-rgb),.18);
border-right-color: rgba(var(--bp-accent-cyan-rgb),.18);
border-bottom-color: rgba(var(--bp-accent-cyan-rgb),.18);
padding: 14px 18px;
margin-bottom: 16px;
}
.ai-sum-row { display: flex; align-items: flex-start; gap: 10px; position: relative; }
.ai-sum-icon { font-size: var(--bp-text-xl); flex-shrink: 0; margin-top: 1px; }
.ai-sum-eyebrow {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: var(--bp-text-xs); font-weight: 700;
color: var(--bp-accent-cyan);
text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px;
}
.ai-sum-text { font-size: var(--bp-text-base); color: var(--bp-text2); line-height: 1.6; }
.ai-sum-time { font-size: var(--bp-text-2xs); color: var(--bp-text3); margin-top: 4px; }
/* 6 ── Sinyal rozeti: ana sayfanın .da-badge tipografisi (Space Grotesk,
.08em tracking). Renk semantiği (yeşil/kırmızı/nötr) DEĞİŞMEDİ. */
.badge {
font-family: 'Space Grotesk', system-ui, sans-serif;
letter-spacing: .08em;
}
.new-badge {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: var(--bp-text-2xs);
letter-spacing: .1em;
border-radius: var(--bp-radius-pill);
padding: 2px 7px;
}
/* 7 ── Hareket azaltma tercihi: hover glow'u gölge olduğu için hareket
üretmiyor, ancak degrade yön değişimi bazı kullanıcılarda titreşim
hissi verebiliyor — kapatıyoruz. */
@media (prefers-reduced-motion: reduce) {
@media (hover: hover) and (pointer: fine) {
.stock-card:hover { background: linear-gradient(135deg, var(--bp-surface) 0%, var(--bp-surface2) 100%); }
}
}
/* 8 ── Kart içi dikey hizalama (canlı ölçümle yakalandı).
.stock-grid `auto-fill` grid olduğu için aynı satırdaki kartlar eşit
yükseklikte (stretch) — ama içerik akışı block olduğundan "Detay →" satırı
metrik sayısına göre farklı yükseklikte duruyordu: ölçümde aynı satırdaki
138px'lik kartlarda footer kart dibinden 40px / 15px, yani 25px'lik görünür
hizasızlık (ENERY/AYGAZ/TUPRS'ta "Kalite Kovalama" ikinci satıra sarıyor,
bazı kartta ayrıca R/R satırı var). Kart başına metrik SAYISI veriye bağlı
olduğu için tipografiyle çözülemez — footer'ı dibe sabitliyoruz. */
.stock-card { display: flex; flex-direction: column; }
.sc-footer { margin-top: auto; padding-top: 10px; }