/* ==== extracted from templates/sinyal_performans.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 cards */
  .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:28px; }
  .stat-card { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-xl); padding:20px; text-align:center; }
  .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:8px; text-transform:uppercase; letter-spacing:.5px; }
  .stat-sub  { font-size:var(--bp-text-sm); color:var(--bp-text3); margin-top:4px; }
  .c-green { color:var(--bp-al); } .c-red { color:var(--bp-sat); } .c-blue { color:var(--bp-accent-cyan); } .c-gold { color:var(--bp-gold); } .c-gray { color:var(--bp-text3); }

  /* Section header */
  .sec-head { font-size:var(--bp-text-lg); font-weight:700; color:var(--bp-text); margin:28px 0 14px; display:flex; align-items:center; gap:8px; }
  .sec-head span { font-size:var(--bp-text-sm); color:var(--bp-text3); font-weight:400; }

  /* Table */
  .tbl-wrap { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:24px; } /* FAZ6 C7: overflow:hidden veriyi kirpiyordu, portfolio.css .pf-table ile ayni desen */
  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); }
  th[data-sort] { padding:0; }
  .perf-sort-btn {
    all:unset; box-sizing:border-box; display:flex; align-items:center; gap:4px;
    width:100%; padding:10px 14px; cursor:pointer;
    font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; white-space:inherit;
  }
  tbody tr { border-bottom:1px solid var(--bp-border-subtle); }
  tbody tr:last-child { border-bottom:none; }
  @media (hover: hover) and (pointer: fine) {
    tbody tr:hover { background:var(--bp-surface2); }
  }
  td { padding:10px 14px; font-size:var(--bp-text-base); white-space:nowrap; }
  .ticker-link { font-weight:700; color:var(--bp-text); text-decoration:none; }
  .ticker-link:hover { color:var(--bp-accent-cyan); }

  /* CPO-DEV2-100: overflow-x:auto kosulsuz uygulanmisti, geregi olmayan genislikte
     bile thead sticky referansini bozuyordu. >=900px'te tablo viewport'a sigar
     (mobilde zaten kart goruntusune geciliyor, asagida). */
  @media (min-width:900px) {
    .tbl-wrap { overflow-x: visible; }
  }

  /* CPO-DEV2-100: Yol A - mobilde tablo satirlari yerine kart listesi. Perf tablosunun
     (perfTbody) siralama/filtre JS'i (perfSortBy/perfApplyFilter) gercek <tr> elemanlarini
     tasiyip gizliyor - o mantigi bozmamak icin ayri bir kart listesi kurmak yerine ayni
     <tr>/<td> CSS ile karta donusturulur (data-label ile etiketlenir). thead, dokunma
     alani (sort butonlari) kaybolmasin diye yatay kaydirilabilir kompakt bir seride kalir. */
  /* r161-bughunt zindex-sticky-overlap: esik 768->899px, tarama.css ile ayni gerekce
     (769-899px araliginda sticky thead .tbl-wrap'in overflow-x:auto'su yuzunden kiriliyordu,
     canli olcumle dogrulandi) - T2.4/DEV2-021 esik-hizalama emsali. */
  @media (max-width:899px) {
    .tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display:block; }
    .tbl-wrap thead {
      display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
      border-bottom:1px solid var(--bp-bkl-bd); position:static;
    }
    .tbl-wrap thead tr { display:flex; }
    .tbl-wrap thead th {
      display:inline-flex; flex-shrink:0; position:static; white-space:nowrap;
    }
    .tbl-wrap tbody tr {
      border:1px solid var(--bp-bkl-bd); border-radius:var(--bp-radius-lg); background:var(--bp-surface);
      padding:8px 12px; margin:10px; margin-bottom:0;
    }
    .tbl-wrap tbody tr:last-child { margin-bottom:10px; }
    .tbl-wrap tbody tr:hover { background:var(--bp-surface); }
    .tbl-wrap td {
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:7px 2px; border-bottom:1px solid var(--bp-border-subtle); white-space:normal; text-align:right;
    }
    .tbl-wrap td:last-child { border-bottom:none; }
    .tbl-wrap td::before {
      content:attr(data-label); font-size:var(--bp-text-2xs); color:var(--bp-text3);
      text-transform:uppercase; letter-spacing:.4px; text-align:left; flex-shrink:0;
    }
  }

  /* Signal badges */
  .sig-al  { 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; background:var(--bp-al-bg); color:var(--bp-al); border:1px solid var(--bp-al-bd); }
  .sig-sat { 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; background:var(--bp-sat-bg); color:var(--bp-sat); border:1px solid var(--bp-sat-bd); }

  /* Bars */
  .bar-wrap { background:var(--bp-border-subtle); border-radius:var(--bp-radius-4); height:8px; width:120px; overflow:hidden; display:inline-block; vertical-align:middle; }
  .bar-fill { height:100%; border-radius:var(--bp-radius-4); }

  /* Computing notice */
  .computing { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); padding:40px; text-align:center; color:var(--bp-text3); }
  .computing .big { font-size:var(--bp-text-40); margin-bottom:12px; }
  .computing p { margin-top:8px; font-size:var(--bp-text-base); }

  /* Info box */
  .info-box { background:var(--bp-surface); border:1px solid var(--bp-border); border-left:3px solid var(--bp-accent-cyan); border-radius:var(--bp-radius-md); padding:14px 16px; margin-bottom:24px; font-size:var(--bp-text-base); color:var(--bp-text3); line-height:1.6; }

  /* Özet hero bar */
  .ozet-bar { background:linear-gradient(135deg,var(--bp-surface2) 0%,var(--bp-surface) 100%); border:1px solid var(--bp-border); border-left:3px solid var(--bp-al); border-radius:var(--bp-radius-xl); padding:16px 20px; margin-bottom:24px; display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
  .ozet-metric { flex:1; min-width:140px; text-align:center; padding:10px 16px; position:relative; }
  .ozet-metric+.ozet-metric::before { content:''; position:absolute; left:0; top:15%; height:70%; width:1px; background:var(--bp-border); }
  .ozet-metric-val { font-size:var(--bp-text-34); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.5px; }
  .ozet-metric-val.hero-val { font-size:var(--bp-text-40); text-shadow:0 0 24px rgba(63,185,80,0.35); }
  .ozet-metric-lbl { font-size:var(--bp-text-2xs); color:var(--bp-text3); margin-top:7px; text-transform:uppercase; letter-spacing:.6px; }
  .ozet-metric-sub { font-size:var(--bp-text-xs); color:var(--bp-text3); margin-top:3px; }
  @media(max-width:640px) { .ozet-bar{flex-wrap:wrap;gap:0} .ozet-metric{flex:0 0 50%;min-width:0;} .ozet-metric:nth-child(2)::before,.ozet-metric:nth-child(4)::before{display:none} .ozet-metric:nth-child(3),.ozet-metric:nth-child(4){border-top:1px solid var(--bp-border);} }

  /* Trigger button */
  .btn-run { background:var(--bp-brand); border:none; color:var(--bp-bg); border-radius:var(--bp-radius); padding:8px 18px; font-size:var(--bp-text-base); font-weight:600; cursor:pointer; margin-left:12px; }
  .btn-run:hover { background:var(--bp-accent-cyan); color:var(--bp-bg); }
  .btn-run:disabled { background:var(--bp-border); color:var(--bp-text3); cursor:not-allowed; }

  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;} .hm{display:none;} }

  /* ── 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); }

@keyframes spin{to{transform:rotate(360deg)}}