/* ==== extracted from templates/sektor_harita.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; }
  /* CPO 10.09: backdrop-filter:blur(16px) sticky header + hemen üstünde/altında
     sürekli animasyonlu makro şerit (index.html'de teşhis edilen aynı jank
     deseni, denetimde bu sayfada da bulundu) — kaldırıldı, opak arkaplana geçirildi. */
  header {
    background: var(--bp-bg);
    border-bottom: 1px solid rgba(var(--bp-border-rgb),0.8);
    padding: 0 24px; height: 60px;
    display:flex; align-items:center; gap:16px; position:sticky; top:32px; z-index:var(--bp-z-dropdown);
  }
  .logo-link { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
  .page-title { font-size:var(--bp-text-2xl); font-weight:700; color:var(--bp-text); font-family:'Space Grotesk',system-ui,sans-serif; }
  .page-sub   { font-size:var(--bp-text-xs); color:var(--bp-text3); }
  .container  { max-width:var(--bp-container-1200); margin:0 auto; padding:24px; }

  /* Heatmap grid */
  .heatmap { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:32px; }

  .sector-card {
    background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); padding:16px;
    cursor:pointer; transition:border-color .15s, transform .1s;
    position:relative; overflow:hidden; color:inherit;
  }
  /* bug-hunt r97: bu dosyada ayni selector iki kez tanimliydi (asagida ~satir 102),
     sonraki tanim cascade'de kazanip transform:-1px'i sessizce olu kod yapiyordu --
     birlestirildi, canli olarak zaten uygulanan -2px+box-shadow degeri korundu. */
  .sector-card:hover { border-color:var(--bp-border2); transform:translateY(-2px); box-shadow:var(--bp-shadow-sm); }
  .sector-card::before {
    content:''; position:absolute; inset:0; opacity:var(--heat-opacity, 0.06);
    background:var(--heat-color, var(--bp-surface2));
    transition: opacity .7s ease-out;
  }

  .sec-name { font-size:var(--bp-text-md); font-weight:700; margin:0 0 10px; position:relative; font-family:'Space Grotesk',system-ui,sans-serif; }
  .sec-stats { display:flex; gap:6px; margin-bottom:10px; position:relative; flex-wrap:wrap; }
  .stat-pill { padding:2px 8px; border-radius:var(--bp-radius-lg); font-size:var(--bp-text-xs); font-weight:600; }
  .pill-al   { background:rgba(var(--bp-al-rgb),.10); color:var(--bp-al); border:1px solid rgba(var(--bp-al-rgb),.28); }
  .pill-sat  { background:rgba(var(--bp-sat-rgb),.12); color:var(--bp-sat); border:1px solid rgba(var(--bp-sat-rgb),.3); }
  .pill-bkl  { background:rgba(var(--bp-text3-rgb),.1); color:var(--bp-bkl); border:1px solid rgba(var(--bp-text3-rgb),.2); }

  /* Progress bar */
  .seg-bar { height:5px; border-radius:var(--bp-radius-sm); background:var(--bp-surface2); display:flex; overflow:hidden; margin-bottom:10px; position:relative; }
  .seg-al  { background:var(--bp-al); transition:width .4s; }
  .seg-sat { background:var(--bp-sat); transition:width .4s; }
  .seg-bkl { background:var(--bp-border); flex:1; }

  /* Score meter */
  .score { font-size:var(--bp-text-2xl); font-weight:800; position:relative; font-family:'Space Grotesk',system-ui,sans-serif; }

  /* Detail expand */
  .detail-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; position:relative; }
  .stock-chip { padding:2px 7px; border-radius:var(--bp-radius); font-size:var(--bp-text-xs); font-weight:600; text-decoration:none; }
  .chip-al  { background:rgba(var(--bp-al-rgb),.10); color:var(--bp-al); border:1px solid rgba(var(--bp-al-rgb),.22); }
  .chip-sat { background:rgba(var(--bp-sat-rgb),.12); color:var(--bp-sat); border:1px solid rgba(var(--bp-sat-rgb),.25); }
  .chip-bkl { background:rgba(var(--bp-text3-rgb),.08); color:var(--bp-bkl); border:1px solid rgba(var(--bp-text3-rgb),.18); }

  /* Legend */
  .legend { display:flex; gap:16px; align-items:center; margin-bottom:16px; font-size:var(--bp-text-sm); flex-wrap:wrap; color:var(--bp-text3); }
  .legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:4px; }

  /* Summary row */
  .sum-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
  .sum-chip { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-md); padding:10px 14px; text-align:center; flex:1; min-width:100px; transition:border-color .15s; position:relative; overflow:hidden; }
  .sum-chip::before { content:''; position:absolute; top:-60%; right:-15%; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(124,92,255,.12), transparent 70%); pointer-events:none; }
  .sum-chip > * { position:relative; }
  .sum-chip:hover { border-color:var(--bp-border2); }
  .sum-num  { font-size:var(--bp-text-22); font-weight:800; font-family:'Space Grotesk',system-ui,sans-serif; }
  .sum-lbl  { font-size:var(--bp-text-2xs); color:var(--bp-text3); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

  /* Loading */
  .loading-msg { text-align:center; padding:60px; color:var(--bp-text3); font-size:var(--bp-text-15); }

  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; }
  footer a:hover { color:var(--bp-text2); }

  @media(max-width:600px) { .container{padding:12px;} .heatmap{grid-template-columns:1fr 1fr;} }
  @media(max-width:400px) { .heatmap{grid-template-columns:1fr;} }

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


  /* ── Header Search Button ── */
  .header-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid var(--bp-border); border-radius:var(--bp-radius); color: var(--bp-text2); cursor: pointer; transition: all .15s; flex-shrink: 0; margin-left: 8px; }
  @media (hover: hover) and (pointer: fine) {
    .header-search-btn:hover { background: var(--bp-surface2); border-color: var(--bp-border2); color: var(--bp-text); }
  }

  .stat-pill.pill-prem {
    background: rgba(var(--bp-volume-rgb),0.14);
    color: var(--bp-volume);
    border: 1px solid rgba(var(--bp-volume-rgb),0.45);
    font-weight: 700;
  }
  /* ── T4.2: Sektör Tab Sistemi (Isı Haritası / Karşılaştır) ── */
  .sekt-tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--bp-border); }
  .sekt-tab-btn {
    font-size:var(--bp-text-base); font-weight:600; padding:9px 16px;
    border:none; border-bottom:2px solid transparent; border-radius:0;
    cursor:pointer; transition:all .15s; color:var(--bp-text3);
    background:none; font-family:'Space Grotesk',system-ui,sans-serif;
  }
  .sekt-tab-btn:hover { color:var(--bp-text); }
  .sekt-tab-btn.active { color:var(--bp-brand); border-bottom-color:var(--bp-brand); }

  /* ── T4.2: Karşılaştır paneli (eski /sektor-karsilastir, sektor_karsilastir.html'den taşındı) ── */
  .cmp-intro { color:var(--bp-text3); font-size:var(--bp-text-base); margin-bottom:16px; }
  .selector-wrap { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-lg); padding:16px 18px; margin-bottom:24px; }
  .selector-label { font-family:'Space Grotesk',system-ui,sans-serif; font-size:var(--bp-text-sm); font-weight:700; color:var(--bp-text3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
  .sector-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chip {
    padding:7px 14px; border-radius:var(--bp-radius-20); font-size:var(--bp-text-sm); font-weight:600;
    border:1px solid var(--bp-border); background:transparent; color:var(--bp-text2);
    cursor:pointer; transition:all .15s; font-family:'Manrope',system-ui,sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  .chip:hover { border-color:var(--bp-border2); color:var(--bp-text); }
  .chip.sel-1 { background:rgba(var(--bp-al-rgb),0.1); border-color:rgba(var(--bp-al-rgb),0.45); color:var(--bp-al); }
  .chip.sel-2 { background:rgba(var(--bp-gold-rgb),0.1); border-color:rgba(var(--bp-gold-rgb),0.45); color:var(--bp-gold); }
  .chip.sel-3 { background:rgba(var(--bp-sat-rgb),0.1); border-color:rgba(var(--bp-sat-rgb),0.45); color:var(--bp-sat); }
  .selector-hint { font-size:var(--bp-text-xs); color:var(--bp-text3); margin-top:10px; }

  .compare-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 22px; background:rgba(var(--bp-brand-rgb),0.12);
    border:1px solid rgba(var(--bp-brand-rgb),0.35); border-radius:var(--bp-radius-md);
    font-family:'Space Grotesk',system-ui,sans-serif; font-size:var(--bp-text-base); font-weight:700;
    color:var(--bp-brand); cursor:pointer; transition:all .15s; margin-top:14px;
  }
  .compare-btn:hover { background:rgba(var(--bp-brand-rgb),0.2); }
  .compare-btn:disabled { opacity:0.4; cursor:not-allowed; }

  .cmp-skeleton { background:linear-gradient(90deg,#1c1b1f 25%,#232124 50%,#1c1b1f 75%); background-size:200% 100%; animation:cmpShimmer 1.4s infinite; border-radius:var(--bp-radius-md); }
  @keyframes cmpShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

  .compare-grid { display:grid; gap:16px; }
  .compare-grid.cols-2 { grid-template-columns:1fr 1fr; }
  .compare-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
  @media (max-width:640px) { .compare-grid.cols-2, .compare-grid.cols-3 { grid-template-columns:1fr; } }

  .sec-col { background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-xl); overflow:hidden; }
  .sec-col-header { padding:16px 18px 14px; border-bottom:1px solid var(--bp-border); }
  .sec-col-name { font-family:'Space Grotesk',system-ui,sans-serif; font-size:var(--bp-text-17); font-weight:700; margin:0 0 6px; }
  .col-accent-0 .sec-col-name { color:var(--bp-al); }
  .col-accent-1 .sec-col-name { color:var(--bp-gold); }
  .col-accent-2 .sec-col-name { color:var(--bp-sat); }

  .score-bar-wrap { margin:10px 0 14px; }
  .score-bar-label { display:flex; justify-content:space-between; font-size:var(--bp-text-xs); color:var(--bp-text3); margin-bottom:5px; font-family:'Space Grotesk',sans-serif; }
  .score-bar-track { height:6px; background:var(--bp-border); border-radius:var(--bp-radius-sm); overflow:hidden; position:relative; }
  .score-bar-fill { height:100%; border-radius:var(--bp-radius-sm); transition:width .4s ease; }
  .score-positive { background:linear-gradient(90deg,var(--bp-al),#00c47a); }
  .score-negative { background:linear-gradient(90deg,#f85149,#d03d36); }
  .score-neutral  { background:var(--bp-border2); }

  /* .sec-stats/.stat-pill isı haritası panelinde farklı bir düzen için zaten kullanılıyor (satır ~64-65) — çakışmayı önlemek için karşılaştır paneli kendi cmp- önekiyle isimlendirildi */
  .cmp-sec-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
  .cmp-stat-pill { background:var(--bp-surface2); border-radius:var(--bp-radius-7); padding:9px 10px; text-align:center; }
  .cmp-stat-pill-lbl { font-size:var(--bp-text-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--bp-text3); font-family:'Space Grotesk',sans-serif; margin-bottom:3px; }
  .cmp-stat-pill-val { font-size:var(--bp-text-lg); font-weight:800; font-variant-numeric:tabular-nums; font-family:'Space Grotesk',monospace,sans-serif; }
  .val-al { color:var(--bp-al); }
  .val-sat { color:var(--bp-sat); }
  .val-bkl { color:var(--bp-bkl); }

  .sec-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .metric-card { background:var(--bp-surface2); border-radius:var(--bp-radius-7); padding:9px 12px; }
  .metric-lbl { font-size:var(--bp-text-2xs); font-weight:600; color:var(--bp-text3); text-transform:uppercase; letter-spacing:0.4px; font-family:'Space Grotesk',sans-serif; margin-bottom:3px; }
  .metric-val { font-size:var(--bp-text-15); font-weight:700; font-variant-numeric:tabular-nums; font-family:'Space Grotesk',monospace,sans-serif; }

  .stocks-title { font-size:var(--bp-text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--bp-text3); font-family:'Space Grotesk',sans-serif; padding:12px 18px 8px; }
  .cmp-stock-row {
    display:flex; align-items:center; padding:9px 18px; gap:10px;
    border-top:1px solid rgba(var(--bp-border-rgb),0.5); transition:background .12s; text-decoration:none; color:inherit;
  }
  @media (hover: hover) and (pointer: fine) {
    .cmp-stock-row:hover { background:var(--bp-surface2); }
  }
  .cmp-stock-ticker { font-size:var(--bp-text-base); font-weight:800; font-family:'Space Grotesk',system-ui,sans-serif; min-width:60px; }
  .cmp-stock-sig { font-size:var(--bp-text-2xs); font-weight:700; padding:2px 7px; border-radius:var(--bp-radius-4); font-family:'Space Grotesk',sans-serif; flex-shrink:0; }
  .cmp-sig-al  { background:rgba(var(--bp-al-rgb),0.15); color:var(--bp-al); }
  .cmp-sig-sat { background:rgba(var(--bp-sat-rgb),0.15); color:var(--bp-sat); }
  .cmp-sig-bkl { background:rgba(var(--bp-text3-rgb),0.15); color:var(--bp-bkl); }
  .cmp-stock-price { font-size:var(--bp-text-sm); font-variant-numeric:tabular-nums; font-family:'Space Grotesk',monospace,sans-serif; color:var(--bp-text2); margin-left:auto; }
  .cmp-stock-chg { font-size:var(--bp-text-sm); font-variant-numeric:tabular-nums; font-family:'Space Grotesk',monospace,sans-serif; min-width:52px; text-align:right; }
  .cmp-chg-pos { color:var(--bp-al); }
  .cmp-chg-neg { color:var(--bp-sat); }
  .cmp-stock-rvol { font-size:var(--bp-text-xs); color:var(--bp-text3); min-width:38px; text-align:right; }
  .cmp-rvol-high { color:var(--bp-gold); }

  .cmp-empty-state { padding:40px 18px; text-align:center; color:var(--bp-text3); }
  .cmp-empty-state svg { width:40px; height:40px; margin-bottom:12px; opacity:.4; }

  #cmpLoadingOverlay { display:none; padding:48px; text-align:center; color:var(--bp-text3); font-size:var(--bp-text-base); }
  #cmpLoadingOverlay.visible { display:block; }
  @keyframes cmpSpin { to{transform:rotate(360deg)} }

  /* ── Data-Art sektör kartı cilası (08.09/09.09 gece) — ::before ısı-katmanı
     FONKSİYONEL (heat-color overlay), dokunulmadı; hafif eğim + mor hover-glow
     ::after ile eklendi (namespace çakışması yok). ── */
  .sector-card {
    transform: rotate(var(--rot, 0deg));
    transition: border-color .15s, transform .2s var(--bp-ease-standard, ease), box-shadow .2s ease;
  }
  .sector-card:nth-child(5n+1) { --rot: -.7deg; }
  .sector-card:nth-child(5n+2) { --rot: .5deg; }
  .sector-card:nth-child(5n+3) { --rot: -.4deg; }
  .sector-card:nth-child(5n+4) { --rot: .6deg; }
  .sector-card:nth-child(5n+5) { --rot: -.5deg; }
  .sector-card:hover {
    border-color: var(--bp-border2);
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 0 20px 45px -22px rgba(124, 92, 255, .4);
  }