/* ==== /temettu-takvimi sayfa CSS'i ==== KOKEN: bu dosya bilanco_takvimi.css'ten KOPYALANDI (T2.5) ve bu yuzden iki sayfa birbirinden bagimsiz suruklendi. 20.09 denetiminde kapatilan farklar: odak halkasi rengi, ticker hover rengi, dokunmatikte yapisan filtre hover'i, load() yarisi. Ayrica /temettu'de DONEM BOLUMU HIC YOK (canli olculdu: .period-* eslesen 0 oge) — 30+ satirlik olu .period-*/.badge-* CSS'i ve olmayan bir "Yatay" dugmesinin .filter-btn.fbkl.active kurali kaldirildi. */ * { margin:0; padding:0; box-sizing:border-box; } body { background:var(--bp-bg); color:var(--bp-text); font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; font-size:var(--bp-text-md); min-height:100vh; overflow-x:hidden; } 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; color:var(--bp-text); } .page-sub { font-size:var(--bp-text-base); color:var(--bp-text3); } .container { max-width:var(--bp-container-1100); margin:0 auto; padding:24px; } /* Filter bar */ .filter-bar { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; align-items:center; } .filter-btn { padding:6px 14px; border-radius:var(--bp-radius-20); border:1px solid var(--bp-border); background:var(--bp-surface2); color:var(--bp-text2); cursor:pointer; font-size:var(--bp-text-sm); font-weight:600; transition:all .15s; font-family:inherit; } /* 20.09 — GERCEK BUG: `:hover` ile `.active` ayni kuralda ve hover-yetenegi kapisi OLMADAN yaziliydi -> dokunmatikte bir filtreye dokunup baskasini secince eski dugme "secili" gorunumde YAPISIP kaliyordu (iki dugme ayni anda aktif gibi). Kardes bilanco_takvimi.css bu kapiyi 12.09'da almisti, kopya olan bu dosya almamisti. */ .filter-btn.active { border-color:var(--bp-brand); color:var(--bp-text); background:rgba(var(--bp-brand-rgb),0.15); } @media (hover: hover) and (pointer: fine) { .filter-btn:hover { border-color:var(--bp-brand); color:var(--bp-text); background:rgba(var(--bp-brand-rgb),0.15); } } .filter-btn.fal.active { border-color:var(--bp-al); background:rgba(var(--bp-al-rgb),0.12); color:var(--bp-al); } .filter-btn.fsat.active { border-color:var(--bp-sat); background:rgba(var(--bp-sat-rgb),0.12); color:var(--bp-sat); } /* Stock cards grid */ .stocks-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; } .stock-card { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); padding:12px 14px; text-decoration:none; color:inherit; transition:border-color .15s, transform .1s; display:block; min-width:0; } .stock-card.sig-al { border-color:rgba(var(--bp-al-rgb),0.3); background:rgba(var(--bp-al-rgb),0.05); } .stock-card.sig-sat { border-color:rgba(var(--bp-sat-rgb),0.3); background:rgba(var(--bp-sat-rgb),0.05); } /* 20.09 — bkz. bilanco_takvimi.css'teki ayni duzeltme: `:hover` ile `.sig-*` bilesikleri ESIT ozgullukte (0,2,0), kaynak sirasi karar verir; kural bilesiklerin USTUNDE oldugu icin renkli kartlarda hover cercevesi hic uygulanmiyordu. Ayrica dokunmatikte hover yapismasin. */ @media (hover: hover) and (pointer: fine) { .stock-card:hover { border-color:var(--bp-brand); transform:translateY(-1px); } } .sc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .sc-ticker { font-size:var(--bp-text-md); font-weight:700; color:var(--bp-text); } /* 21.09 (CPO) — DOKUNMA HEDEFİ (WCAG 2.5.8-AA): rozetin İÇİNDE `sigLabelTooltip()` tarafından basılan `` var ve /metodoloji'ye gidiyor; kart ise (role="link") /hisse/'ye gidiyor — FARKLI hedefler, yani eşdeğer-kontrol muafiyeti YOK. Bağlantı canlıda 68×14px (bilanco) / 34×13px (temettü) ölçüldü: kartın içinde, kartla farklı yere giden 13px'lik bir dokunma hedefi. Rozet yüksekliği 24px iç-kutuya çıkarıldı ve bağlantı rozetin boyunu doldurur (align-self stretch) — yazı boyutu DEĞİŞMEDİ. */ .sig-badge { display:inline-flex; align-items:stretch; font-size:var(--bp-text-2xs); font-weight:700; padding:2px 7px; border-radius:var(--bp-radius-md); text-transform:uppercase; letter-spacing:.3px; } /* 24px ASGARI ROZETE DEĞİL BAĞLANTIYA yazılır: rozet border-box, min-height 28 iken padding(2+2)+border(1+1) düşünce ic kutu 22px kalıyordu — canlı ölçümde 18 "Yatay" rozeti hâlâ 22px çıktı. Hedef olan öge bağlantının KENDİSİ, ölçü de onun üzerinde olmalı. */ .sig-badge > .jargon-term { display:flex; align-items:center; min-height:24px; } /* 20.09 — GERCEK BUG (sinif ad-alani cakismasi, bkz. bilanco_takvimi.css): ciplak `.sig-bkl` kartin kendi degistiricisiyle cakisiyordu; canli olcum 28 kartin 24'unde kart zemininin `--bp-surface` yerine rozetin rgba(text3,.1) zeminini tasidigini gosterdi. */ .sig-badge.sig-al { background:rgba(var(--bp-al-rgb),0.15); color:var(--bp-al); border:1px solid rgba(var(--bp-al-rgb),0.3); } .sig-badge.sig-sat { background:rgba(var(--bp-sat-rgb),0.15); color:var(--bp-sat); border:1px solid rgba(var(--bp-sat-rgb),0.3); } .sig-badge.sig-bkl { background:rgba(var(--bp-text3-rgb),0.1); color:var(--bp-bkl); border:1px solid rgba(var(--bp-text3-rgb),0.2); } .sc-name { font-size:var(--bp-text-xs); color:var(--bp-text3); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sc-price { font-size:var(--bp-text-base); font-weight:600; color:var(--bp-text2); } .sc-date { font-size:var(--bp-text-2xs); color:var(--bp-text3); margin-top:4px; } .sc-kap { display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:var(--bp-text-2xs); color:var(--bp-brand); text-decoration:none; background:rgba(var(--bp-brand-rgb),0.08); padding:2px 7px; border-radius:var(--bp-radius); border:1px solid rgba(var(--bp-brand-rgb),0.15); min-height:44px; /* r110 bug-hunt: 20.5px idi, WCAG 2.5.5 dokunma hedefi altinda (214 kart) */ } .sc-kap:hover { background:rgba(var(--bp-brand-rgb),0.15); } /* Summary row */ .summary-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; } /* .da-panel deltasi (govde recetesi data-art.css'te) */ .sum-chip { --da-glow-rgb: var(--bp-art-violet-rgb); --da-glow-a: .12; --da-glow-y: -55%; --da-glow-x: -8%; --da-glow-size: 90px; border-radius:var(--bp-radius-md); padding:10px 16px; text-align:center; flex:1; min-width:110px; } .sum-num { font-size:var(--bp-text-22); font-weight:800; font-family:'Space Grotesk',system-ui,sans-serif; font-variant-numeric:tabular-nums; } .sum-num--brand { color:var(--bp-brand); } .sum-lbl { font-size:var(--bp-text-xs); color:var(--bp-text3); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; } /* Info banner */ .info-banner { background:rgba(var(--bp-gold-rgb),0.08); border:1px solid rgba(var(--bp-gold-rgb),0.2); border-radius:var(--bp-radius-lg); padding:12px 16px; margin-bottom:20px; font-size:var(--bp-text-sm); color:var(--bp-gold); line-height:1.6; } .loading-msg { text-align:center; padding:60px; color:var(--bp-text3); font-size:var(--bp-text-lg); } /* ── Filtre sonucu boş durum (bughunt-12.09: tarama.html'in .empty-state desenine hizalandi, ikon+baslik+CTA icermeyen ciplak loading-msg yerine) ── */ .empty-state { text-align:center; padding:60px 20px; color:var(--bp-text2); } .empty-state .empty-icon { font-size:var(--bp-text-40); margin-bottom:14px; } .empty-state h2 { font-size:var(--bp-text-lg); font-weight:700; color:var(--bp-text); margin-bottom:6px; } .empty-state p { font-size:var(--bp-text-base); margin-top:6px; } .btn-reset { background:none; color:var(--bp-text2); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:8px 14px; font-size:var(--bp-text-base); cursor:pointer; font-family:inherit; transition:all .15s; margin-top:14px; } .btn-reset:hover { border-color:var(--bp-text2); color:var(--bp-text); } @media(max-width:600px) { .container{padding:12px;} .stocks-grid{grid-template-columns:1fr 1fr;} } /* Makro Ticker */ .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:7px;padding:0 18px;border-right:1px solid var(--bp-border);font-size:var(--bp-text-xs);height:32px;} .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);} .stock-card { cursor: pointer; } /* 20.09 — odak halkasi kaldirildi: kanonik `:focus-visible` kurali _bp_critical_css.html'de (bkz. bilanco_takvimi.css'teki ayni not). */ .sc-ticker-link { text-decoration: none; color: inherit; } /* 20.09 — ticker hover rengi --bp-brand'den --bp-accent-cyan'a: kardes /bilanco-takvimi ve /portfolio zaten camgobegi kullaniyor (2/3 emsal), mor marka rengi nav/odak affordance'ina ayrildi. */ .sc-ticker-link:hover .sc-ticker { color: var(--bp-accent-cyan); } /* 20.09 — 09.09'un el-yapimi kose pariltisi kaldirildi; birebir ayni ::before artik data-art.css `.da-panel`de tek kaynakta. */