/* ==== extracted from templates/portfolio.html (T2.5) ==== */
* { margin:0; padding:0; box-sizing:border-box; }
body { -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:32px; 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; }
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:24px; }
.sum-card { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); padding:16px; text-align:center; }
.sum-num { font-size:var(--bp-text-28); font-weight:800; line-height:1; }
.sum-pct { font-size:var(--bp-text-sm); font-weight:700; margin-top:3px; line-height:1.2; min-height:1.2em; }
.sum-lbl { font-size:var(--bp-text-xs); color:var(--bp-text3); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
.sum-green{ color:var(--bp-al); } .sum-red{ color:var(--bp-sat); } .sum-blue{ color:var(--bp-accent-cyan); }
.add-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:20px; background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); padding:16px; }
.add-bar input { background:var(--bp-border-subtle); border:1px solid var(--bp-border); color:var(--bp-text); border-radius:var(--bp-radius); padding:7px 12px; font-size:var(--bp-text-lg); outline:none; } /* FAZ6 C6: iOS input-zoom onlemi, min 16px */
.add-bar input:focus { border-color:var(--bp-accent-cyan); }
.add-bar input { width:140px; }
.add-bar input[type=number] { width:130px; }
.btn-add { background:var(--bp-brand); border:none; color:var(--bp-bg); border-radius:var(--bp-radius); padding:7px 16px; font-size:var(--bp-text-base); font-weight:600; cursor:pointer; }
.btn-add:hover { background:var(--bp-accent-cyan); color:var(--bp-bg); }
.add-lbl { font-size:var(--bp-text-sm); color:var(--bp-text3); }
.pf-table { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* CPO-DEV2-100: overflow-x:auto kosulsuz uygulanmisti, geregi olmayan genislikte bile
thead sticky referansini bozuyordu. >=900px'te tablo viewport'a sigar (mobilde
zaten #pfMobileCards devrede, table gizli) - scroll ihtiyaci kalmiyor. */
@media (min-width:900px) {
.pf-table { overflow-x: visible; }
}
table { width:100%; border-collapse:collapse; }
thead th { background:var(--bp-surface2); padding:10px 14px; text-align:left; font-size:var(--bp-text-xs); color:var(--bp-text3); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--bp-border); white-space:nowrap; position:sticky; top:60px; z-index:var(--bp-z-dropdown); }
tbody tr { border-bottom:1px solid var(--bp-border-subtle); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bp-surface2); }
td { padding:10px 14px; white-space:nowrap; font-size:var(--bp-text-base); }
.ticker-link { font-weight:700; color:var(--bp-text); text-decoration:none; }
.ticker-link:hover { color:var(--bp-accent-cyan); }
.signal-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--bp-radius-xl); font-size:var(--bp-text-xs); font-weight:600; }
.signal-AL { background:var(--bp-al-bg); color:var(--bp-al); border:1px solid var(--bp-al-bd); }
.signal-SAT { background:var(--bp-sat-bg); color:var(--bp-sat); border:1px solid var(--bp-sat-bd); }
.signal-BEKLE { background:rgba(var(--bp-text3-rgb),.15); color:var(--bp-bkl); border:1px solid rgba(var(--bp-text3-rgb),.3); }
.pos-pnl { color:var(--bp-al); font-weight:600; }
.neg-pnl { color:var(--bp-sat); font-weight:600; }
.neu-pnl { color:var(--bp-text3); }
.btn-del { position:relative; background:none; border:none; color:var(--bp-text3); cursor:pointer; font-size:var(--bp-text-md); padding:2px 6px; }
.btn-del::before { content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.btn-del:hover { color:var(--bp-sat); }
/* Export / Import toolbar */
.pf-actions {
display: flex; gap: 8px; align-items: center;
margin-bottom: 12px; flex-wrap: wrap;
}
.btn-action {
position: relative;
display: inline-flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--bp-border); color: var(--bp-text3);
border-radius:var(--bp-radius); padding: 5px 12px; font-size: var(--bp-text-sm);
cursor: pointer; transition: all .15s;
}
.btn-action::before { content:''; position:absolute; top:50%; left:50%; min-width:44px; min-height:44px; width:100%; height:100%; transform:translate(-50%,-50%); }
.btn-action svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-action:hover { border-color: var(--bp-brand); color: var(--bp-brand); }
.btn-action.danger:hover { border-color: var(--bp-sat); color: var(--bp-sat); }
#importFileInput { display: none; }
/* Import modal */
.import-toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: var(--bp-surface2); border: 1px solid var(--bp-border); border-radius:var(--bp-radius-md);
padding: 10px 20px; font-size: var(--bp-text-base); color: var(--bp-text);
z-index: var(--bp-z-page-toast); display: none; box-shadow: var(--bp-shadow-sm);
}
.import-toast.ok { border-color: var(--bp-al-bd); color: var(--bp-al); }
.import-toast.err { border-color: var(--bp-sat-bd); color: var(--bp-sat); }
@media (max-width: 900px) {
.import-toast { bottom: calc(24px + 64px + env(safe-area-inset-bottom)); }
}
.empty-msg { text-align:center; padding:60px; color:var(--bp-text3); }
.empty-msg .em-icon { font-size:var(--bp-text-40); margin-bottom:12px; }
/* localStorage uyarı banner */
.ls-warning {
display:flex; align-items:flex-start; gap:12px;
background:rgba(var(--bp-gold-rgb),.06); border:1px solid rgba(var(--bp-gold-rgb),.2);
border-radius:var(--bp-radius-lg); padding:14px 16px; margin-bottom:20px;
font-size:var(--bp-text-base); color:var(--bp-text3); line-height:1.6;
}
.ls-warning-icon { font-size:var(--bp-text-xl); flex-shrink:0; margin-top:1px; }
.ls-warning-body { flex:1; }
.ls-warning-title { font-weight:700; color:var(--bp-gold); margin-bottom:3px; }
.ls-warning-close {
position:relative; background:none; border:none; color:var(--bp-text3); cursor:pointer;
font-size:var(--bp-text-lg); padding:0 2px; flex-shrink:0; line-height:1;
transition:color .15s;
}
.ls-warning-close::before { content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.ls-warning-close:hover { color:var(--bp-gold); }
/* T7.4: canlı veri/grafik fetch hatası banner'ı */
.pf-fetch-error {
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
background:rgba(var(--bp-sat-rgb),.08); border:1px solid var(--bp-sat-bd);
border-radius:var(--bp-radius-lg); padding:12px 16px; margin-bottom:20px;
font-size:var(--bp-text-base); color:var(--bp-sat);
}
.pf-fetch-error-retry {
background:none; border:1px solid var(--bp-sat-bd); color:var(--bp-sat);
border-radius:var(--bp-radius); padding:5px 12px; font-size:var(--bp-text-sm); font-weight:600;
cursor:pointer; transition:background .15s;
}
.pf-fetch-error-retry:hover { background:rgba(var(--bp-sat-rgb),.12); }
footer { text-align:center; padding:20px; font-size:var(--bp-text-sm); color:var(--bp-text3); margin-top:32px; }
footer a { color:var(--bp-text3); text-decoration:none; }
@media(max-width:600px) { .container{padding:12px;} thead th.hm, td.hm{display:none;} .add-bar input{width:100px;} }
/* ── CPO-DEV2-100: Yol A - mobilde tablo yerine kart listesi (tarama.html
#mobileResultCards ile ayni desen).
r161-bughunt zindex-sticky-overlap: bu bloktaki eski yorum "sticky-header fix'i
sadece 769-899px 'tablet' araligini kapsiyor" varsayimi CANLI OLCUMLE CURUTULDU -
820px genislikte thead th scroll ile birlikte kayiyor (sticky HIC calismiyor,
tabloyla ayni delta ile hareket ediyor), "matris zaten sigar" varsayimi CSS'in
overflow-x:auto -> overflow-y:auto zorlamasini (sticky referansini kirmasini)
etkilemiyor. Esik 768->899px, T2.4/DEV2-021 emsaliyle hizalandi, boslugu kapatir. ── */
#pfMobileCards { display:none; flex-direction:column; gap:10px; padding:4px 0 12px; }
@media (max-width:899px) {
#pfTable { display:none !important; }
#pfMobileCards { display:flex; }
}
.pf-mcard {
background:var(--bp-surface); border:1px solid var(--bp-bkl-bd); border-radius:var(--bp-radius-lg);
padding:12px 14px;
}
.pf-mtop { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.pf-mticker { font-size:var(--bp-text-15); font-weight:700; color:var(--bp-text); text-decoration:none; }
.pf-mticker:hover { color:var(--bp-accent-cyan); }
.pf-mtop-right { display:flex; align-items:center; gap:8px; }
.pf-mprice-row, .pf-mdetail-row { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.pf-mprice-row { margin-bottom:10px; }
.pf-mdetail-row { padding-top:10px; border-top:1px solid var(--bp-border-subtle); }
.pf-metric { display:flex; flex-direction:column; gap:2px; }
.pf-metric-label { font-size:var(--bp-text-2xs); color:var(--bp-text3); text-transform:uppercase; letter-spacing:.4px; }
.pf-mprice-row .pf-metric span { font-size:var(--bp-text-base); font-weight:600; }
.pf-mdate { font-size:var(--bp-text-sm); color:var(--bp-text3); }
.pf-mspark { margin-top:10px; }
.pf-mentry { margin-top:8px; }
/* F6: Sparkline + Sinyal Asistanı + XU030 */
.td-spark { width:90px; padding:6px 10px; vertical-align:middle; }
.btn-entry {
display:inline-block; padding:2px 7px; border-radius:var(--bp-radius-4); margin-left:5px;
font-size:var(--bp-text-2xs); font-weight:700; cursor:pointer; vertical-align:middle;
background:rgba(var(--bp-al-rgb),.1); border:1px solid rgba(var(--bp-al-rgb),.3); color:var(--bp-al);
white-space:nowrap; transition:all .15s;
}
.btn-entry:hover { background:rgba(var(--bp-al-rgb),.2); border-color:var(--bp-al); }
/* ── Makro Ticker Bandı ── */
.macro-bar { background:var(--bp-bg); border-bottom:1px solid var(--bp-border); height:32px; 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; 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); }
/* ── Data-Art köşe parıltısı (09.09 gece) — özet kutuları + ekleme çubuğu;
yoğun pf-table/pf-mcard pozisyon listesine (kişi başına farklı sayıda satır
olabilir, tekdüze ızgara değil ama yine de yoğun veri) dokunulmadı — aynı
"scanability > estetik" gerekçesi diğer sayfalarla tutarlı. ── */
.sum-card, .add-bar {
position: relative;
overflow: hidden;
}
.sum-card::before, .add-bar::before {
content: '';
position: absolute;
top: -55%;
right: -8%;
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--bp-art-violet-rgb), .12), transparent 70%);
pointer-events: none;
}
.sum-card > *, .add-bar > * { position: relative; }