/* ==== from <style> block 1 (orig lines 27-4958) <style> ==== */

/* -----------------------------------------------------------------------------
   1) Temel dokunma ayarları
----------------------------------------------------------------------------- */
html, body { touch-action: pan-x pan-y; }

/* -----------------------------------------------------------------------------
   2) Reset & Varsayılanlar
----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body{
  width:100%;
  min-height:100%;
  height:auto;
  background: var(--bg-color);
  color: var(--text-color);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch; /* iOS inertial scroll */
}

body, button, input, select, textarea{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
td, th{
  font-variant-numeric: tabular-nums;
}
body.dark-theme ::-webkit-scrollbar-track{ background:#101922; }
body.dark-theme ::-webkit-scrollbar-thumb{ border:1px solid rgba(255,255,255,.08); }

/* -----------------------------------------------------------------------------
   3) Renk Değişkenleri (tek yerde birleştirildi)
----------------------------------------------------------------------------- */
:root{
  /* Navigation / ana tema değişkenleri */
  --pf-bg-color:#f6f8fb;
  --pf-text-color:#0f1722;
  --pf-card-bg:#ffffff;
  --pf-card-shadow:rgba(15,23,34,0.06);
  --pf-header-color:#14243d;
  --pf-beta-color:#2563eb;
  --pf-subtext-color:#5f6876;

  --pf-primary-color:#1d4ed8;
  --pf-primary-hover-color:#1a43bb;
  --pf-divider-color:#e3e8ef;

  --pf-flash-up:#edf9f2;
  --pf-flash-down:#fff1f1;

  --table-head-bg:#f3f6fa;
  --table-head-text:#162033;
  --table-border-color:#e5eaf1;
  --table-hover-bg:#eef3f8;

  --positive-color:#22c55e;
  --negative-color:#ef4444;
  --tab-selected-bg:#eaf1ff;

  --pf-nav-h-desktop:60px;
  --pf-nav-h-tablet:56px;
  --pf-nav-h-compact:0px;

  --pf-mobile-bar-base-height:60px;
  --pf-safe-top:env(safe-area-inset-top,0);
  --pf-safe-bottom:env(safe-area-inset-bottom,0);
  --pf-mobile-bar-height:calc(var(--pf-mobile-bar-base-height) + var(--pf-safe-bottom) + 8px);
  --pf-mobile-panel-clearance:0px;
  --pf-mobile-panel-bottom-gap:calc(var(--pf-mobile-bar-height) + var(--pf-mobile-panel-clearance));
  --pf-mobile-panel-top-gap:10px;

  --pf-more-nudge-y:2px;
  --pf-panel-side-gap:16px;
  --pf-panel-radius:18px;
  --pf-touch-target:44px;

  --pf-glow-a:#3b82f6;
  --pf-glow-b:#60a5fa;
  --pf-glow-shadow:rgba(59,130,246,.14);
  --pf-mobile-backdrop:rgba(15,23,34,.24);

  /* Eski tema değişkenleri -> pf tema sistemine dinamik bağlı */
  --bg-color:var(--pf-bg-color);
  --text-color:var(--pf-text-color);
  --card-bg:var(--pf-card-bg);
  --card-shadow:var(--pf-card-shadow);

  --header-color:var(--pf-header-color);
  --beta-color:var(--pf-beta-color);
  --subtext-color:var(--pf-subtext-color);

  --primary-color:var(--pf-primary-color);
  --primary-hover-color:var(--pf-primary-hover-color);
  --divider-color:var(--pf-divider-color);

  --flash-up:var(--pf-flash-up);
  --flash-down:var(--pf-flash-down);

  /* Tema uyumlu up/down renkleri */
  --pos-mix:var(--positive-color);
  --neg-mix:var(--negative-color);

  /* Mini-chart line renkleri — temaya uyumlu, daha az saturasyonlu
     ("cırtlak" değil). Açık temada koyu, kapalı temada açık ton. */
  --pf-chart-line-up:rgba(85, 170, 120, 0.88);
  --pf-chart-line-down:rgba(200, 95, 95, 0.88);

  --accent-color:var(--primary-color);

  --tooltip-bg:color-mix(in srgb, var(--card-bg) 95%, transparent);
  --tooltip-text:var(--text-color);
  --tooltip-border:color-mix(in srgb, var(--text-color) 10%, transparent);
  --score-bar-bg:color-mix(in srgb, var(--text-color) 10%, transparent);

  /* Floating coin tooltip - tema uyumlu */
  --pf-tooltip-bg:color-mix(in srgb, var(--card-bg) 96%, var(--accent-color) 4%);
  --pf-tooltip-border:color-mix(in srgb, var(--text-color) 12%, transparent);
  --pf-tooltip-shadow:0 18px 45px color-mix(in srgb, var(--card-shadow) 72%, rgba(15,23,42,.14));
  --pf-tooltip-text:var(--text-color);
  --pf-tooltip-muted:color-mix(in srgb, var(--text-color) 62%, transparent);
  --pf-tt-font-size:12.5px;
  --pf-tt-metric-label-size:10.5px;
  --pf-tt-metric-value-size:13px;
  --pf-tt-score-label-size:11px;
  --pf-tt-score-value-size:14.5px;

  /* Category Rise/Fall % kolonları */
  --rf-col-min:44px;
  --rf-col-max:66px;
  --rf-col-vw:4.2vw;
  --rf-neutral-color:#d6b000;

  /* Uygulama yüzeyi */
  --pf-page-max:1760px;
  --pf-shell-x:clamp(8px, 1.2vw, 20px);
  --pf-shell-y:clamp(6px, .8vw, 14px);
  --pf-surface-soft:color-mix(in srgb, var(--card-bg) 76%, transparent);
  --pf-surface-softer:color-mix(in srgb, var(--card-bg) 58%, transparent);
  --pf-surface-line:color-mix(in srgb, var(--text-color) 9%, transparent);
  --pf-control-bg:color-mix(in srgb, var(--card-bg) 68%, transparent);
  --pf-control-bg-hover:color-mix(in srgb, var(--card-bg) 74%, var(--accent-color) 8%);
  --pf-control-active:color-mix(in srgb, var(--accent-color) 14%, transparent);
  --pf-control-radius:14px;
  --pf-soft-shadow:0 14px 34px color-mix(in srgb, var(--card-shadow) 78%, transparent);

  /* Alt bar / mobil sticky alt navigasyon boşluğu */
  --bottom-bar-h:80px;
  --pf-mobile-bottom-content-space:70px;
  --pf-mobile-bottom-safe-space:calc(var(--pf-mobile-bottom-content-space) + var(--pf-safe-bottom, 0px));
}

body.dark-theme{
  --pf-bg-color:#07111b;
  --pf-text-color:#d9e4f2;
  --pf-card-bg:#0d1824;
  --pf-card-shadow:rgba(0,0,0,0.42);
  --pf-header-color:#edf4ff;
  --pf-beta-color:#7fb3ff;
  --pf-subtext-color:#96a3b4;

  --pf-primary-color:#4da3ff;
  --pf-primary-hover-color:#2f8df0;
  --pf-divider-color:#1a2a39;

  --pf-flash-up:#0d2418;
  --pf-flash-down:#2a1316;

  --pf-scrollbar-thumb-color:#314356;

  --table-head-bg:#101c28;
  --table-head-text:#ecf3ff;
  --table-border-color:#162635;
  --table-hover-bg:#122131;

  --positive-color:#22c55e;
  --negative-color:#ef4444;
  --tab-selected-bg:#112031;

  --pf-glow-a:#5da8ff;
  --pf-glow-b:#7cc6ff;
  --pf-glow-shadow:rgba(93,168,255,.18);
  --pf-mobile-backdrop:rgba(2,6,12,.52);

  /* Dark tooltip aliasları da otomatik uyumlu olsun */
  --pf-tooltip-bg:rgba(6,11,18,0.96);
  --pf-tooltip-border:rgba(120,140,170,0.38);
  --pf-tooltip-shadow:0 18px 45px rgba(0,0,0,0.5);
  --pf-tooltip-text:#e8eef8;

  --rf-neutral-color:#e0b93f;
}
body.dark-theme{
  /* Eski alias değişkenleri de pf tema sisteminden beslensin; neon eski tema kaldırıldı. */
  --bg-color:var(--pf-bg-color);
  --text-color:var(--pf-text-color);
  --card-bg:var(--pf-card-bg);
  --card-shadow:var(--pf-card-shadow);

  --header-color:var(--pf-header-color);
  --beta-color:var(--pf-beta-color);
  --subtext-color:var(--pf-subtext-color);

  --primary-color:var(--pf-primary-color);
  --primary-hover-color:var(--pf-primary-hover-color);
  --divider-color:var(--pf-divider-color);

  --flash-up:var(--pf-flash-up);
  --flash-down:var(--pf-flash-down);

  --pos-mix:var(--positive-color);
  --neg-mix:var(--negative-color);

  /* Mini-chart soft line renkleri — dark temada biraz daha aydınlık */
  --pf-chart-line-up:rgba(110, 200, 145, 0.86);
  --pf-chart-line-down:rgba(220, 110, 110, 0.86);

  --tooltip-bg:color-mix(in srgb, var(--card-bg) 92%, transparent);
  --tooltip-text:var(--text-color);
  --tooltip-border:color-mix(in srgb, var(--text-color) 12%, transparent);
  --score-bar-bg:color-mix(in srgb, var(--text-color) 12%, transparent);
}

/* Yüzde değişimler (24h/7d/30d/1y) */
.pctchg{ white-space:nowrap; font-variant-numeric: tabular-nums; }
.pctchg.pos{ color: var(--pos-mix); }
.pctchg.neg{ color: var(--neg-mix); }
.pctchg.neu{ color: inherit; opacity:.85; }
.pctchg.zero-dash{
  display:block;
  width:100%;
  text-align:center;
  opacity:.72;
}

/* -----------------------------------------------------------------------------
   4) Kapsayıcılar
----------------------------------------------------------------------------- */
#main-container{
  width:100%;
  min-height:100dvh;
  height:auto;
  background:
    radial-gradient(900px 360px at 12% -8%, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 62%),
    radial-gradient(760px 320px at 88% 0%, color-mix(in srgb, var(--positive-color) 6%, transparent), transparent 60%),
    var(--bg-color);
  color:var(--text-color);
  overflow-x:hidden;
  border-radius:0;
  box-shadow:none;
  border:0;
}

#container {
    width: min(100%, var(--pf-page-max));
    min-height: 100dvh;
    height: auto;
    padding:
        calc(var(--pf-shell-y) / 2)
        calc(var(--pf-shell-x) / 3)
        calc(10px + var(--pf-safe-bottom));
  background:transparent;
  border-radius:0;
  box-shadow:none;
  border:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0 auto;
}

/* -----------------------------------------------------------------------------
   5) Üst Sıra (Sekmeler + Kontroller)
----------------------------------------------------------------------------- */
#top-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  
  margin-bottom: 0;
  padding-bottom: 8px;          /* kontrollü boşluk */
  border-bottom: 1px solid var(--divider-color);

  width:100%;
  background:var(--card-bg);
}

#tabs-container{
  overflow-x:auto;
  margin-right:10px;
}

#tabs{
  display:inline-flex;
  gap:15px;
  white-space:nowrap;
  background:transparent;
  border:0;
}

#tabs span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  white-space:nowrap;
  line-height:1.08;
  padding:10px 20px 4px;
  cursor:pointer;
  font-size:16px;
  font-weight:560;
  color:var(--text-color);
  user-select:none;
  text-decoration:none;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition: color .16s ease, border-color .16s ease, opacity .2s ease, transform .12s ease;
}

/* Klavye ile gezinti: modern outline */
:where(button, [role="button"], a, input, select, textarea, #tabs span):focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent-color) 70%, white);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Sekmede hover yerine daha “net” micro-interaction */
#tabs span:hover{ opacity:.9; transform: translateY(-1px); }
#tabs span:active{ transform: translateY(0); }

#tabs span.active{
  color:var(--text-color);
  border-bottom:2px solid var(--accent-color);
}

#right-top-controls{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

#right-top-controls button,
#right-top-controls select{
  padding:7px 12px 6px;
  border-radius:0;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  background:transparent;
  color:var(--text-color);
  box-shadow:none;
  cursor:pointer;
}

#right-top-controls select{
  background:transparent;
  color:var(--text-color);
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* -----------------------------------------------------------------------------
   6) Seçili Liste & Arama (UI/UX POLISHED – TAM HALİ)
----------------------------------------------------------------------------- */
#selected-filter-ui{
  gap:6px;
  min-height:34px;
  padding:2px 6px 4px 4px;
  border-radius:0;
  background:transparent;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
}
#selected-filter-name{
  font-weight:520;
  margin-left:2px;
  position:relative;
  cursor:default;
  line-height:1;
  letter-spacing:.01em;
  color:color-mix(in srgb, var(--text-color) 82%, transparent);
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#selected-filter-back{
  margin-right:0;
  margin-bottom:0;
  cursor:pointer;
  color:var(--text-color);
  text-decoration:none;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:0;
  transition: transform .08s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  box-shadow:none;
}

@media (hover:hover){
  #selected-filter-back:hover{
    color:var(--accent-color);
    border-bottom-color:var(--accent-color);
    background:transparent;
    box-shadow:none;
  }
}
#selected-filter-back:active{
  transform: scale(.96);
}

#selected-filter-name.is-visible,
#selected-filter-back.is-visible{
  display:inline !important;
}

/* Search wrapper */
#search-container{
  position:relative;
  display:none;
  min-width:200px;
  max-width:280px;
}

/* Search input – modern hover/focus, responsive width */
#search-input{
  width:100%;
  min-width:220px;
  height:34px;
  padding:0 12px;
  padding-right:42px; /* X butonu için alan */
  border:1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius:14px;
  background:var(--pf-control-bg);
  color:var(--text-color);
  outline:none;
  font-size:13.5px;
  font-weight:500;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .06s ease;
}

@media (hover:hover){
  #search-input:hover{
    border-color: color-mix(in srgb, var(--text-color) 26%, transparent);
    background: color-mix(in srgb, var(--card-bg) 96%, #fff 4%);
  }
}

#search-input:focus{
  border-color: color-mix(in srgb, var(--accent-color, #2d7cff) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #2d7cff) 35%, transparent);
}

/* Clear icon – gerçek buton hissi, input içinde ortalı */
.clear-icon{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  line-height:1;
  cursor:pointer;
  user-select:none;

  border-radius:0;
  border:0;
  border-bottom:2px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  box-shadow:none;

  transition: transform .08s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

@media (hover:hover){
  .clear-icon:hover{
    border-bottom-color: var(--negative-color, #ef4444);
    background: transparent;
    color:var(--negative-color, #ef4444);
    box-shadow:none;
  }
}

.clear-icon:active{
  transform:translateY(-50%) scale(.96);
}

/* Mobile: ölçüleri koru, taşmayı engelle */
@media (max-width:600px){
  #search-container{
    min-width:0;
    width:100%;
  }
  #search-input{
    min-width:0;
    width:100%;
    height:34px;
  }
}


/* -----------------------------------------------------------------------------
   7) Sekme İçeriği
----------------------------------------------------------------------------- */
.tab-content{
  display:none;
  width:100%;
  transition:margin-top .25s ease;
}
.tab-content.active{ display:block; }

/* -----------------------------------------------------------------------------
   8) Tablo sistemi — tek kaynak
   - Dikey kaydırma sayfada kalır, yatay taşma sadece tablo wrapper içindedir.
   - Sütun genişlikleri colgroup + class tabanlıdır; JS sticky/reorder gerekmez.
   - Mobilde coin + puan sticky; satır hover efektleri dokunmatik ekranda tamamen kapalıdır.
----------------------------------------------------------------------------- */
:root{
  --top-ui-h:74px;
  --pf-table-row-h:42px;
  --pf-table-head-h:46px;
  --pf-table-font:13.15px;
  --pf-table-head-font:11.65px;
  --pf-table-mobile-font:12px;
  --pf-table-line:1.18;

  /* Daha sade/profesyonel tablo yüzeyi */
  --pf-table-head-bg:color-mix(in srgb, var(--card-bg) 62%, transparent);
  --pf-table-head-text:color-mix(in srgb, var(--text-color) 84%, transparent);
  --pf-table-row-base:color-mix(in srgb, var(--card-bg) 46%, transparent);
  --pf-table-row-alt:color-mix(in srgb, var(--card-bg) 36%, transparent);
  --pf-table-row-hover:color-mix(in srgb, var(--accent-color) 8%, var(--card-bg) 46%);
  --pf-table-line-color:color-mix(in srgb, var(--text-color) 8%, transparent);
  --pf-table-muted:#5f6876;
  --pf-table-sticky-shadow:12px 0 20px -18px rgba(15,23,42,.48);
  --pf-table-sticky-border:color-mix(in srgb, var(--text-color) 8%, transparent);

  /* Mobil sticky kolon yüzeyleri
     Tema rengine bağlıdır: beyaza/koyuya sabitlenmez.
     Puan kolonu opak; coin kolonu solda kapalı, sağa doğru kontrollü saydamdır. */
  --pf-sticky-score-row-bg:color-mix(in srgb, var(--bg-color) 58%, var(--card-bg) 42%);
  --pf-sticky-score-row-bg-alt:color-mix(in srgb, var(--bg-color) 66%, var(--card-bg) 34%);
  --pf-sticky-score-head-bg:color-mix(in srgb, var(--bg-color) 48%, var(--card-bg) 52%);
  --pf-sticky-coin-row-bg:
    linear-gradient(
      90deg,
      var(--pf-sticky-score-row-bg) 0%,
      var(--pf-sticky-score-row-bg) 50%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg) 92%, transparent) 76%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg) 72%, transparent) 100%
    );
  --pf-sticky-coin-row-bg-alt:
    linear-gradient(
      90deg,
      var(--pf-sticky-score-row-bg-alt) 0%,
      var(--pf-sticky-score-row-bg-alt) 50%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg-alt) 90%, transparent) 76%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg-alt) 68%, transparent) 100%
    );
  --pf-sticky-coin-head-bg:
    linear-gradient(
      90deg,
      var(--pf-sticky-score-head-bg) 0%,
      var(--pf-sticky-score-head-bg) 56%,
      color-mix(in srgb, var(--pf-sticky-score-head-bg) 92%, transparent) 80%,
      color-mix(in srgb, var(--pf-sticky-score-head-bg) 72%, transparent) 100%
    );

  --pf-mobile-score-col-w:62px;
  --pf-mobile-coin-col-w:106px;
  --pf-cat-icon-col-w:136px;
}

body.dark-theme{
  --pf-table-head-bg:color-mix(in srgb, var(--card-bg) 70%, transparent);
  --pf-table-head-text:color-mix(in srgb, var(--text-color) 88%, transparent);
  --pf-table-row-base:color-mix(in srgb, var(--card-bg) 58%, transparent);
  --pf-table-row-alt:color-mix(in srgb, var(--card-bg) 46%, transparent);
  --pf-table-row-hover:color-mix(in srgb, var(--accent-color) 10%, var(--card-bg) 54%);
  --pf-table-line-color:rgba(148,163,184,.11);
  --pf-table-muted:#96a3b4;
  --pf-table-sticky-shadow:12px 0 20px -18px rgba(0,0,0,.78);
  --pf-table-sticky-border:rgba(148,163,184,.11);

  /* Koyu tema için ayrı sticky yüzeyler.
     Beyaz/açık tema karışımı kullanılmaz; mevcut koyu tema tokenlarından türetilir. */
  --pf-sticky-score-row-bg:color-mix(in srgb, var(--bg-color) 34%, var(--card-bg) 66%);
  --pf-sticky-score-row-bg-alt:color-mix(in srgb, var(--bg-color) 48%, var(--card-bg) 52%);
  --pf-sticky-score-head-bg:color-mix(in srgb, var(--bg-color) 28%, var(--card-bg) 72%);

  --pf-sticky-coin-row-bg:
    linear-gradient(
      90deg,
      var(--pf-sticky-score-row-bg) 0%,
      var(--pf-sticky-score-row-bg) 56%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg) 96%, transparent) 78%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg) 86%, transparent) 100%
    );

  --pf-sticky-coin-row-bg-alt:
    linear-gradient(
      90deg,
      var(--pf-sticky-score-row-bg-alt) 0%,
      var(--pf-sticky-score-row-bg-alt) 56%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg-alt) 95%, transparent) 78%,
      color-mix(in srgb, var(--pf-sticky-score-row-bg-alt) 84%, transparent) 100%
    );

  --pf-sticky-coin-head-bg:
    linear-gradient(
      90deg,
      var(--pf-sticky-score-head-bg) 0%,
      var(--pf-sticky-score-head-bg) 60%,
      color-mix(in srgb, var(--pf-sticky-score-head-bg) 96%, transparent) 82%,
      color-mix(in srgb, var(--pf-sticky-score-head-bg) 86%, transparent) 100%
    );
}

@media (max-width:600px){
  :root{
    --top-ui-h:106px;
    --pf-table-row-h:38px;
    --pf-table-head-h:44px;
    --pf-cat-icon-col-w:94px;
  }
}

.table-wrapper,
#crypto-content.table-wrapper,
#categories-content.table-wrapper,
#category-content.table-wrapper,
#market-data-content.table-wrapper,
.tab-content.table-wrapper{
  width:100%;
  max-width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  overflow-x:auto;
  overflow-y:clip;
  /* X yönünde rubber-band'i kapat — mobilde en solda boşluk görünmesin */
  overscroll-behavior-x:none;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  border:0;
  border-radius:0;
  box-shadow:none;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--accent-color) 58%, transparent) transparent;
}

@supports not (overflow:clip){
  .table-wrapper,
  #crypto-content.table-wrapper,
  #categories-content.table-wrapper,
  #category-content.table-wrapper,
  #market-data-content.table-wrapper,
  .tab-content.table-wrapper{ overflow-y:hidden; }
}

.table-wrapper::-webkit-scrollbar{ height:8px; width:8px; }
.table-wrapper::-webkit-scrollbar-track{ background:transparent; }
.table-wrapper::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent-color) 44%, transparent);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

#crypto-table,
#category-table,
#favorites-table,
#market-data-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  color:var(--text-color);
  font-variant-numeric:tabular-nums;
}

#crypto-table th,
#crypto-table td,
#category-table th,
#category-table td,
#favorites-table th,
#favorites-table td,
#market-data-table th,
#market-data-table td{
  border:0;
  box-shadow:none;
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
  background-clip:padding-box;
}

#crypto-table thead th,
#category-table thead th,
#favorites-table thead th,
#market-data-table thead th{
  top:0;
  z-index:30;
  height:var(--pf-table-head-h);
  min-height:var(--pf-table-head-h);
  padding:7px 3px 8px;
  font-size:var(--pf-table-head-font);
  font-weight:550;
  line-height:1.14;
  letter-spacing:.01em;
  text-align:left;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  color:var(--pf-table-head-text);
  background:var(--pf-table-head-bg);
  border-bottom:1px solid var(--pf-table-line-color);
}

#crypto-table tbody td,
#category-table tbody td,
#favorites-table tbody td,
#market-data-table tbody td{
  min-height:var(--pf-table-row-h);
  padding:7px 3px;
  font-size:var(--pf-table-font);
  font-weight:460;
  line-height:var(--pf-table-line);
  white-space:nowrap;
  background:var(--pf-table-row-base);
  border-bottom:1px solid var(--pf-table-line-color);
}

#crypto-table tbody tr:nth-child(even) td,
#category-table tbody tr:nth-child(even) td,
#favorites-table tbody tr:nth-child(even) td,
#market-data-table tbody tr:nth-child(even) td{
  background:var(--pf-table-row-alt);
}

/* Hover sadece gerçek mouse/trackpad olan cihazlarda çalışır.
   Mobilde/touch cihazlarda satır hover efektleri bilerek kapalıdır. */
@media (hover:hover) and (pointer:fine){
  #crypto-table tbody tr:hover td,
  #category-table tbody tr:hover td,
  #favorites-table tbody tr:hover td,
  #market-data-table tbody tr:hover td{
    background:var(--pf-table-row-hover);
  }
}

#crypto-table thead th:first-child,
#category-table thead th:first-child,
#favorites-table thead th:first-child,
#market-data-table thead th:first-child{ border-top-left-radius:10px; }

#crypto-table thead th:last-child,
#category-table thead th:last-child,
#favorites-table thead th:last-child,
#market-data-table thead th:last-child{ border-top-right-radius:10px; }

/* Kripto tablo kolonları */
#crypto-table col.col-index{ width:3%; }
#crypto-table col.col-score{ width:4%; } /* masaüstü: "100" + "Puan/Genel" başlığına yetecek kadar dar */
#crypto-table col.col-coin{ width:12%; }
#crypto-table col.col-price{ width:8%; }
#crypto-table col.col-fv-buy{ width:8%; }
#crypto-table col.col-fv-sell{ width:8%; }
#crypto-table col.col-pct24,
#crypto-table col.col-pct2,
#crypto-table col.col-pct7,
#crypto-table col.col-pct30,
#crypto-table col.col-pct365{ width:5%; }
#crypto-table col.col-spark{ width:8.5%; }
#crypto-table col.col-vol24{ width:7%; }
#crypto-table col.col-mcap{ width:7%; }
#crypto-table col.col-infl{ width:5%; }
#crypto-table col.col-vm{ width:6%; }

#crypto-table th.col-index,
#crypto-table td.col-index,
#crypto-table th.col-score,
#crypto-table td.col-score,
#crypto-table th.col-pct24,
#crypto-table td.col-pct24,
#crypto-table th.col-pct2,
#crypto-table td.col-pct2,
#crypto-table th.col-pct7,
#crypto-table td.col-pct7,
#crypto-table th.col-pct30,
#crypto-table td.col-pct30,
#crypto-table th.col-pct365,
#crypto-table td.col-pct365,
#crypto-table th.col-spark,
#crypto-table td.col-spark{ text-align:center; }

/* Puan sütunu: hem başlık hem gövde sağa dayalı (kullanıcı isteği) */
#crypto-table th.col-score{ text-align:right; }
#crypto-table td.col-score{ text-align:right; }

#crypto-table th.col-price,
#crypto-table td.col-price,
#crypto-table th.col-fv-buy,
#crypto-table td.col-fv-buy,
#crypto-table th.col-fv-sell,
#crypto-table td.col-fv-sell,
#crypto-table th.col-vol24,
#crypto-table td.col-vol24,
#crypto-table th.col-mcap,
#crypto-table td.col-mcap,
#crypto-table th.col-infl,
#crypto-table td.col-infl,
#crypto-table th.col-vm,
#crypto-table td.col-vm{ text-align:right; }

#crypto-table th.col-coin,
#crypto-table td.col-coin{ text-align:left; }

#crypto-table td.col-coin{
  display:table-cell;
  vertical-align:middle;
  min-width:0;
  white-space:nowrap;
}

#crypto-table td.col-coin .coin-icon-wrapper{
  display:inline-grid;
  vertical-align:middle;
  margin:0 6px 0 0;
  transform:none;
}

#crypto-table td.col-coin .coin-link{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  min-width:0;
  max-width:calc(100% - 34px);
  margin-left:0 !important;
  top:0 !important;
  font-weight:570!important;
  line-height:1.05;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#crypto-table td.col-coin .coin-link-label{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#crypto-table .price-main{
  font-weight:530;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

.fv-split-cell .fv-main,
.fv-line-main{
  font-weight:430;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

#crypto-table .price-daily-mobile{ display:none; }

#crypto-table .sparkline-chart{
  display:block;
  width:min(100%, 116px) !important;
  height:28px !important;
  margin:0 auto;
  cursor:pointer;
}

#crypto-table thead th.sortable,
#category-table thead th.sortable-category{
  cursor:pointer;
  padding-right:3px;
}

#crypto-table thead th .th-stack,
#category-table thead th .th-stack,
#market-data-table thead th .th-stack{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-width:0;
  max-width:100%;
  row-gap:2px;
  vertical-align:top;
  text-align:left;
}

/* 30g Grafik başlığı: ikincil (micro) yazısı olmadığı için dikeyde ortalanıyordu;
   diğer başlıklarla aynı hizada (üstte) dursun. */
#crypto-table thead th.col-spark{ vertical-align:top !important; }

#crypto-table thead th .th-main,
#category-table thead th .th-main,
#market-data-table thead th .th-main{
  display:block;
  min-width:0;
  max-width:100%;
  padding-right:0;
  padding-bottom:1px;
  font-size:inherit;
  font-weight:590;
  line-height:1.18;
  letter-spacing:.01em;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  word-break:normal;
}

#crypto-table thead th .th-subline,
#category-table thead th .th-subline,
#market-data-table thead th .th-subline{
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:5px;
  width:100%;
  min-height:14px;
  margin-top:4px;
  line-height:1.12;
}

#crypto-table thead th .th-subline .th-micro,
#category-table thead th .th-subline .th-micro,
#market-data-table thead th .th-subline .th-micro{
  order:1;
}

#crypto-table thead th .th-subline .sortico,
#category-table thead th .th-subline .sortico{
  order:2;
}

#crypto-table thead th .sortico,
#category-table thead th .sortico{
  position:static;
  transform:none;
  width:14px;
  height:12px;
  margin:0;
  opacity:.46;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
}

#crypto-table thead th .sortico svg,
#category-table thead th .sortico svg{ width:14px; height:14px; }
#crypto-table thead th .sortico .sortico-h,
#category-table thead th .sortico .sortico-h{ display:none; }

.th-micro{
  display:inline-flex;
  width:auto;
  min-width:0;
  margin-top:0;
  padding-right:0;
  font-size:9.55px;
  font-weight:540;
  line-height:1.05;
  letter-spacing:.01em;
  white-space:normal;
  color:color-mix(in srgb, var(--pf-table-head-text) 54%, transparent);
  opacity:.86;
}

#crypto-table thead th .bottom-tooltip-wrapper,
#category-table thead th .bottom-tooltip-wrapper,
#market-data-table thead th .bottom-tooltip-wrapper{
  display:flex;
  width:100%;
  justify-content:inherit;
  align-items:center;
  gap:4px;
  margin-top:0;
}

/* Kategori tablo kolonları */
#category-table col.cat-col1{ width:28%; }
#category-table col.cat-col2{ width:7%; }
#category-table col.cat-col3,
#category-table col.cat-col4,
#category-table col.cat-col5{ width:15%; }
#category-table col.cat-col6{ width:8%; }
#category-table col.cat-col9,
#category-table col.cat-col10,
#category-table col.cat-col11{ width:4%; }

#category-table th.cat-col2,
#category-table td.cat-col2,
#category-table th.cat-col6,
#category-table td.cat-col6,
#category-table th.cat-col9,
#category-table td.cat-col9,
#category-table th.cat-col10,
#category-table td.cat-col10,
#category-table th.cat-col11,
#category-table td.cat-col11{ text-align:center; }

#category-table th.cat-col3,
#category-table td.cat-col3,
#category-table th.cat-col4,
#category-table td.cat-col4,
#category-table th.cat-col5,
#category-table td.cat-col5{ text-align:left; }

#category-table td.cat-col1{
  font-weight:560;
  letter-spacing:-.01em;
}

#category-table td.cat-col3,
#category-table td.cat-col4,
#category-table td.cat-col5{ white-space:nowrap; }

#category-table td.cat-col3 .pf-tt-trigger,
#category-table td.cat-col4 .pf-tt-trigger,
#category-table td.cat-col5 .pf-tt-trigger{
  margin-right:5px;
  vertical-align:middle;
}

#category-table td.cat-col3 img.pf-coin-icon,
#category-table td.cat-col4 img.pf-coin-icon,
#category-table td.cat-col5 img.pf-coin-icon{
  width:20px;
  height:20px;
}

.rf-cell .rf-pct{
  min-width:38px;
  justify-content:center;
}

/* Puan rozetleri tablo içinde daha sade ve dar */
#crypto-table .score-cell,
#category-table .score-cell,
#favorites-table .score-cell{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  height:auto;
  margin:0;
}

#crypto-table .score-badge,
#category-table .score-badge,
#favorites-table .score-badge{
  width:42px;
  height:24px;
  min-width:42px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:590;
  line-height:1;
  transform:none;
  letter-spacing:.01em;
}

/* Market-data tablo varsa sade kolon sistemi */
#market-data-table{ table-layout:fixed; width:100%; }
#market-data-table thead th:first-child,
#market-data-table tbody td:first-child{ display:none; }
#market-data-table th:nth-child(2), #market-data-table td:nth-child(2){ width:34%; text-align:left; }
#market-data-table th:nth-child(3), #market-data-table td:nth-child(3),
#market-data-table th:nth-child(4), #market-data-table td:nth-child(4){ width:15%; text-align:right; }
#market-data-table th:nth-child(5), #market-data-table td:nth-child(5){ width:36%; text-align:center; }
.market-data-chart{ width:min(100%, 180px) !important; height:44px !important; }

/* Tablet */
@media (min-width:601px) and (max-width:1024px){
  #crypto-table{ min-width:1160px; }
  #category-table{ min-width:860px; }

  #crypto-table tbody td,
  #category-table tbody td,
  #favorites-table tbody td,
  #market-data-table tbody td{
    padding:6px 2px;
    font-size:12.5px;
  }

  #crypto-table thead th,
  #category-table thead th,
  #favorites-table thead th,
  #market-data-table thead th{
    padding:6px 2px;
    font-size:11px;
  }

  #crypto-table .score-badge,
  #category-table .score-badge,
  #favorites-table .score-badge{
    width:38px;
    min-width:38px;
    height:22px;
    font-size:12px;
  }
}

/* Mobil */
@media (max-width:600px){
  #crypto-content.table-wrapper,
  #categories-content.table-wrapper,
  #category-content.table-wrapper,
  #market-data-content.table-wrapper{
    padding-bottom:calc(24px + var(--pf-safe-bottom));
    overflow-x:auto;
    overflow-y:visible;
    overscroll-behavior-x:none;
    position:relative;
  }

  #crypto-table{
    width:max-content;
    min-width:1100px;
    table-layout:fixed;
    isolation:isolate;
    transform:translateZ(0);
  }

  #crypto-table tbody tr{
    --pf-current-score-sticky-bg:var(--pf-sticky-score-row-bg);
    --pf-current-coin-sticky-bg:var(--pf-sticky-coin-row-bg);
  }

  #crypto-table tbody tr:nth-child(even){
    --pf-current-score-sticky-bg:var(--pf-sticky-score-row-bg-alt);
    --pf-current-coin-sticky-bg:var(--pf-sticky-coin-row-bg-alt);
  }

  #crypto-table col.col-index{ width:0; }
  #crypto-table col.col-score{ width:var(--pf-mobile-score-col-w); }
  #crypto-table col.col-coin{ width:var(--pf-mobile-coin-col-w); }
  #crypto-table col.col-price{ width:96px; }
  #crypto-table col.col-fv-buy,
  #crypto-table col.col-fv-sell{ width:94px; }
  #crypto-table col.col-pct24,
  #crypto-table col.col-pct2,
  #crypto-table col.col-pct7,
  #crypto-table col.col-pct30,
  #crypto-table col.col-pct365{ width:62px; }
  #crypto-table col.col-spark{ width:112px; }
  #crypto-table col.col-vol24{ width:88px; }
  #crypto-table col.col-mcap{ width:92px; }
  #crypto-table col.col-infl{ width:86px; }
  #crypto-table col.col-vm{ width:82px; }

  #crypto-table thead th.col-index,
  #crypto-table tbody td.col-index{ display:none; }

  #crypto-table thead th,
  #category-table thead th,
  #favorites-table thead th,
  #market-data-table thead th{
    height:var(--pf-table-head-h);
    min-height:var(--pf-table-head-h);
    padding:7px 2px 8px;
    font-size:10.75px;
    line-height:1.12;
    overflow:visible;
    text-overflow:clip;
  }

  #crypto-table tbody td,
  #category-table tbody td,
  #favorites-table tbody td,
  #market-data-table tbody td{
    padding:6px 2px;
    font-size:var(--pf-table-mobile-font);
    line-height:1.12;
  }

  #crypto-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:96;
  }

  #crypto-table tbody td{
    position:relative;
    z-index:1;
  }

  /* Puan (col-score) artık mobilde sola sabitlenMEZ; normal hücre gibi yatay
     kaydırmayla akar. Yalnızca Coin sütunu solda sabit (kimlik sütunu). */
  #crypto-table thead th.col-coin,
  #crypto-table tbody td.col-coin{
    position:sticky !important;
    left:0 !important;
    width:var(--pf-mobile-coin-col-w) !important;
    min-width:var(--pf-mobile-coin-col-w) !important;
    max-width:var(--pf-mobile-coin-col-w) !important;
    background:var(--pf-current-coin-sticky-bg) !important;
    box-shadow:var(--pf-table-sticky-shadow) !important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    contain:paint;
  }

  #crypto-table tbody td.col-coin{
    z-index:72;
  }

  #crypto-table thead th.col-coin{
    top:0 !important;
    z-index:160;
    background:var(--pf-sticky-coin-head-bg) !important;
  }

  /* Touch cihazlarda tarayıcının yapışık kalan :hover durumlarını sıfırla. */
  #crypto-table tbody tr:hover td,
  #category-table tbody tr:hover td,
  #favorites-table tbody tr:hover td,
  #market-data-table tbody tr:hover td{
    background:var(--pf-table-row-base);
  }

  #crypto-table tbody tr:nth-child(even):hover td,
  #category-table tbody tr:nth-child(even):hover td,
  #favorites-table tbody tr:nth-child(even):hover td,
  #market-data-table tbody tr:nth-child(even):hover td{
    background:var(--pf-table-row-alt);
  }

  #crypto-table tbody tr:hover > td.col-coin,
  #crypto-table tbody tr:nth-child(even):hover > td.col-coin{
    background:var(--pf-current-coin-sticky-bg) !important;
  }

  #crypto-table .price-daily-mobile{
    display:block;
    margin-top:3px;
    font-size:10.5px;
    line-height:1;
    color:var(--pf-table-muted);
  }

  #crypto-table .score-badge,
  #category-table .score-badge,
  #favorites-table .score-badge{
    width:36px;
    min-width:36px;
    height:21px;
    border-radius:7px;
    font-size:11.5px;
  }

  #crypto-table .sparkline-chart{
    width:96px !important;
    height:26px !important;
  }

  #category-table{
    width:max-content;
    min-width:760px;
    table-layout:fixed;
    isolation:isolate;
    transform:translateZ(0);
  }

  #category-table col.cat-col1{ width:142px; }
  #category-table col.cat-col2{ width:52px; }
  #category-table col.cat-col3,
  #category-table col.cat-col4,
  #category-table col.cat-col5{ width:92px; }
  #category-table col.cat-col6{ width:78px; }
  #category-table col.cat-col9,
  #category-table col.cat-col10,
  #category-table col.cat-col11{ width:54px; }

  #category-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:96;
  }

  #category-table tbody td{
    position:relative;
    z-index:1;
  }

  #category-table thead th.cat-col1,
  #category-table tbody td.cat-col1{
    position:sticky !important;
    left:0 !important;
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
    background:var(--pf-table-row-base);
    box-shadow:var(--pf-table-sticky-shadow) !important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    contain:paint;
  }

  #category-table tbody td.cat-col1{
    z-index:72;
  }

  #category-table thead th.cat-col1{
    top:0 !important;
    z-index:160;
    background:var(--pf-table-head-bg);
  }

  #category-table tbody tr:nth-child(even) > td.cat-col1{ background:var(--pf-table-row-alt); }

  #category-table tbody tr:hover > td.cat-col1{ background:var(--pf-table-row-base); }
  #category-table tbody tr:nth-child(even):hover > td.cat-col1{ background:var(--pf-table-row-alt); }

  #category-table td.cat-col1{
    max-width:142px;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  #category-table td.cat-col3 img.pf-coin-icon,
  #category-table td.cat-col4 img.pf-coin-icon,
  #category-table td.cat-col5 img.pf-coin-icon{
    width:18px;
    height:18px;
  }

  #category-table .rf-cell .rf-pct{
    min-width:36px;
    padding:2px 5px;
    font-size:11px;
  }

  .th-micro{
    margin-top:0;
    font-size:9.25px;
    line-height:1.14;
  }
}

/* -----------------------------------------------------------------------------
   9) Tablo dışı genel scrollbar
----------------------------------------------------------------------------- */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent-color) 62%, transparent);
  border-radius:999px;
}

/* ================== Tooltip sistemi/* ================== Tooltip sistemi – başlık tooltipleri (DÜZELTİLDİ + GELİŞTİRİLDİ) ==================
   - Global score tooltip: body içine JS ile ekleniyor, overlay üstünde ve modern görünüm
   - SCORE DETAILS TOOLTIP: puan breakdown tooltip'i (başlık + satırlar + bar)
   - th[data-tip] / bottom-tooltip-* sistemleriyle çakışmayacak şekilde sınıf/id ayrımı korunur
   ================================================================================================ */

/* -----------------------------
   Global score tooltip (JS bunu body'ye ekliyor)
   ----------------------------- */
#global-score-tooltip{
  position: fixed;                    /* top/left çalışsın */
  z-index: 12050;                     /* overlay(9000) üstünde */
  display: none;  /* ✅ default kapalı */

  /* Boyut */
  min-width: 300px;
  width: max-content;
  max-width: min(420px, 92vw);

  /* Görünüm */
  background: var(--tooltip-bg, rgba(18, 22, 32, 0.96));
  color: var(--tooltip-text, #fff);
  border: 1px solid var(--tooltip-border, rgba(255,255,255,0.12));
  border-radius: 14px;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 12px 14px;

  /* JS show/hide yönetir */
  visibility: hidden;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  transform: translateY(2px);

  pointer-events: none;               /* hover zincirini bozmasın */
  left: 0;
  top: 0;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Global tooltip açıldığında (JS opacity/visibility set ediyor) daha iyi hissiyat için */
#global-score-tooltip[style*="opacity: 1"]{
  transform: translateY(0);
}

/* Mobilde daha kompakt */
@media (max-width: 560px){
  #global-score-tooltip{
    min-width: min(280px, 92vw);
    padding: 11px 12px;
    border-radius: 13px;
  }
}

/* -----------------------------
   SCORE DETAILS TOOLTIP (BASE)
   ----------------------------- */
.score-details-tooltip{
  position: absolute;                 /* JS scrollX/scrollY ekliyor */
  z-index: 12050;                     /* overlay üstü */

  /* Boyut — coin tooltip'iyle aynı his: sabit, içerikle büyümez */
  width: min(360px, 92vw);
  max-width: 92vw;

  padding: 11px 13px 12px;
  border-radius: 16px;

  /* Tema: coin (pf-tt) tooltip'iyle aynı değişkenler (koyu cam DEĞİL) */
  background: var(--pf-tooltip-bg, var(--card-bg));
  color: var(--pf-tooltip-text, var(--text-color));
  border: 1px solid var(--pf-tooltip-border, var(--divider-color));
  box-shadow:
    var(--pf-tooltip-shadow, 0 18px 45px rgba(0,0,0,0.25)),
    0 1px 0 color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 6%, transparent) inset;

  font-size: 13px;
  line-height: 1.35;

  /* JS show/hide bunları yönetiyor */
  visibility: hidden;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;

  pointer-events: none;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* mobil */
@media (max-width: 560px){
  .score-details-tooltip{
    min-width: min(280px, 92vw);
    padding: 11px 12px;
    border-radius: 13px;
  }
}

/* Açıkken küçük bir yükselme hissi */
.score-details-tooltip[style*="opacity: 1"]{
  transform: translateY(0);
}

/* Başlık */
.score-details-tooltip .tooltip-header{
  font-weight:600;
  font-size: 14px;
  letter-spacing: .2px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 8px;
  padding-bottom: 9px;

  color: var(--tooltip-text, var(--text-color));
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--tooltip-text, var(--text-color)) 10%,
    transparent
  );
}

/* Alt başlık */
.score-details-tooltip .metric-title{
  margin: 10px 0 6px;
  font-size: 12px;
  font-weight:570;
  color: color-mix(
    in srgb,
    var(--tooltip-text, var(--text-color)) 62%,
    transparent
  );
}

/* Satırlar */
.score-details-tooltip .tooltip-row{
  margin-top: 9px;
}

.score-details-tooltip .tooltip-row-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.score-details-tooltip .tooltip-row .label{
  min-width: 150px;
  flex: 1 1 auto;
  font-weight:540;
  color: color-mix(
    in srgb,
    var(--tooltip-text, var(--text-color)) 70%,
    transparent
  );
}

.score-details-tooltip .tooltip-row .val{
  min-width: 72px;
  flex: 0 0 auto;
  text-align: right;

  font-variant-numeric: tabular-nums;
  font-weight:600;
  letter-spacing: .15px;
  color: var(--tooltip-text, var(--text-color));
}

/* Bar */
.score-details-tooltip .score-bar{
  margin-top: 0;
  height: 7px;
  border-radius: 999px;
  background: var(
    --score-bar-bg,
    color-mix(in srgb, var(--tooltip-text, var(--text-color)) 10%, transparent)
  );
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(
    in srgb,
    var(--tooltip-text, var(--text-color)) 6%,
    transparent
  ) inset;
}

.score-details-tooltip .score-bar-fill{
  display: block;
  height: 100%;
  border-radius: 999px;
  /* JS inline width set ediyor; renk inline geliyorsa onu kullanır */
  filter: saturate(1.06);
}

/* ── Modern kategori tooltip: başlık adı + coin sayısı + öne çıkan ortalama skor ── */
.score-details-tooltip .cat-tt-name{
  flex:1 1 auto; min-width:0;
  font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.score-details-tooltip .cat-tt-count{
  flex:0 0 auto;
  font-size:11.5px; font-weight:540;
  color: color-mix(in srgb, var(--tooltip-text, var(--text-color)) 55%, transparent);
}
.score-details-tooltip .cat-tt-hero{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin: 2px 0 10px;
  padding: 9px 12px;
  border-radius:12px;
  background: color-mix(in srgb, var(--tooltip-text, var(--text-color)) 6%, transparent);
}
.score-details-tooltip .cat-tt-hero-label{
  font-size:12px; font-weight:540;
  color: color-mix(in srgb, var(--tooltip-text, var(--text-color)) 70%, transparent);
}
.score-details-tooltip .cat-tt-hero-val{
  font-size:26px; font-weight:700; line-height:1;
  font-variant-numeric: tabular-nums; letter-spacing:.3px;
}
/* Sade 2-sütun metrik listesi — coin (pf-tt) tooltip'iyle aynı dil (bar yok) */
.score-details-tooltip .cat-tt-metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:16px;
  row-gap:0;
}
.score-details-tooltip .tooltip-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0; padding:5px 2px;
  border-bottom:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 9%, transparent);
}
/* yalnız son satırda çizgi yok (tek/çift sayıda çalışır) */
.score-details-tooltip .cat-tt-metrics .tooltip-row:last-child,
.score-details-tooltip .cat-tt-metrics .tooltip-row:nth-last-child(2):nth-child(odd){ border-bottom:0; }
.score-details-tooltip .tooltip-row .label{
  flex:1 1 auto; min-width:0;
  font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 70%, transparent);
}
.score-details-tooltip .tooltip-row .val{
  flex:0 0 auto; min-width:0; text-align:right;
  font-variant-numeric:tabular-nums; font-weight:600;
}
.score-details-tooltip .score-bar{ display:none; }

/* Küçük ayırıcı */
.score-details-tooltip .tooltip-sep{
  height: 1px;
  background: color-mix(
    in srgb,
    var(--tooltip-text, var(--text-color)) 10%,
    transparent
  );
  margin: 10px 0 6px;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #global-score-tooltip,
  .score-details-tooltip{
    transition: none !important;
    transform: none !important;
  }
}
/* -----------------------------------
   ICON + WRAPPER taban (başlık tooltipleri)
   ----------------------------------- */
.bottom-tooltip-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  isolation: isolate; /* z-index güvenliği */
}

.info-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  border-radius: 999px;

  font-size: 12px;
  font-weight:600;
  line-height: 1;

  cursor: help;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  background: rgba(255,255,255,0.08);
  color: var(--text-color, #fff);
  border: 1px solid var(--tooltip-border, rgba(255,255,255,0.12));
  box-shadow: 0 2px 10px rgba(0,0,0,.14);

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.bottom-tooltip-wrapper:is(:hover, :active, :focus-within) .info-icon{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

/* Wrapper tooltip kutusu (default gizli) */
.bottom-tooltip-text{
  display: block;
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(2px);

  width: max-content;
  min-width: 240px;
  max-width: 320px;

  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: normal;

  background: var(--tooltip-bg, rgba(18, 22, 32, 0.96));
  color: var(--tooltip-text, #fff);
  border: 1px solid var(--tooltip-border, rgba(255,255,255,0.12));
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2147483000;

  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* Wrapper tooltip oku */
.bottom-tooltip-arrow{
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: var(--tooltip-bg, rgba(18, 22, 32, 0.96));

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2147482999;

  transition: opacity .16s ease, visibility .16s ease;
}

/* Wrapper tooltip göster (desktop+mobile) */
.bottom-tooltip-wrapper:is(:hover, :active, :focus-within) .bottom-tooltip-text,
.bottom-tooltip-wrapper:is(:hover, :active, :focus-within) .bottom-tooltip-arrow,
.bottom-tooltip-wrapper.is-open .bottom-tooltip-text,
.bottom-tooltip-wrapper.is-open .bottom-tooltip-arrow{
  opacity: 1;
  visibility: visible;
}

.bottom-tooltip-wrapper:is(:hover, :active, :focus-within) .bottom-tooltip-text,
.bottom-tooltip-wrapper.is-open .bottom-tooltip-text{
  transform: translateX(-50%) translateY(0);
}

/* mobil: tooltip daha geniş olmasın */
@media (max-width: 560px){
  .bottom-tooltip-text{
    min-width: min(240px, 92vw);
    max-width: min(320px, 92vw);
  }
}


/* --- TH[DATA-TIP] tooltipleri artık body içindeki global tooltip ile gösterilir.
   Pseudo tooltipler tablo wrapper içinde kırpılmasın diye kapalı tutulur. --- */
th[data-tip]{ position:relative; }
th[data-tip]::before,
th[data-tip]::after{
  content:none !important;
  display:none !important;
}

/* Mobilde kutu biraz genişlesin */
@media (max-width:600px){
  .bottom-tooltip-text{ max-width:min(92vw, 320px); }
}


/* =========================
   SORT ICON + HEADER ALIGNMENT (global)
   ========================= */

#crypto-table thead th,
#category-table thead th,
#favorites-table thead th,
#market-data-table thead th{
  vertical-align:top;
}

#crypto-table thead th.sortable,
#category-table thead th.sortable-category{
  position:sticky;
  top:0;
  padding-right:3px;
}

#crypto-table thead th .th-stack,
#category-table thead th .th-stack,
#market-data-table thead th .th-stack{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-width:0;
  max-width:100%;
  row-gap:2px;
  vertical-align:top;
  text-align:left;
}

#crypto-table thead th .th-subline,
#category-table thead th .th-subline,
#market-data-table thead th .th-subline{
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:5px;
  width:100%;
  min-height:14px;
  margin-top:4px;
  line-height:1.12;
}

#crypto-table thead th .th-subline .th-micro,
#category-table thead th .th-subline .th-micro,
#market-data-table thead th .th-subline .th-micro{
  order:1;
}

#crypto-table thead th .th-subline .sortico,
#category-table thead th .th-subline .sortico{
  order:2;
}

th .sortico{
  position:static;
  inset:auto;
  transform:none;
  width:14px;
  height:12px;
  margin:0;
  opacity:.45;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
}

th .sortico svg{
  width:14px;
  height:14px;
  display:block;
}

th .sortico .sortico-h{ display:none; }

th .sortico .up,
th .sortico .down{
  opacity:.45;
}

th.asc .sortico{ opacity:.95; }
th.asc .sortico .up{ opacity:1; }
th.asc .sortico .down{ opacity:.15; }

th.desc .sortico{ opacity:.95; }
th.desc .sortico .up{ opacity:.15; }
th.desc .sortico .down{ opacity:1; }

@media (hover:hover){
  #crypto-table thead th.sortable:hover .sortico,
  #category-table thead th.sortable-category:hover .sortico{
    opacity:.75;
  }
}

@media (max-width:600px){
  th .sortico{
    width:16px;
    height:14px;
  }

  #crypto-table thead th .sortico .sortico-v,
  #category-table thead th .sortico .sortico-v,
  th .sortico .sortico-v{
    display:block;
    width:16px;
    height:16px;
  }

  #crypto-table thead th .sortico .sortico-h,
  #category-table thead th .sortico .sortico-h,
  th .sortico .sortico-h{
    display:none !important;
  }
}


/* Market-Data tablo sıkılaştırma */
#market-data-header .header-cell{ padding:6px 10px; }
#market-data-table tbody td{ padding:4px 2px; line-height:18px; }
#market-data-table{ table-layout:fixed; width:100%; }

/* Market-Data küçük çizgi grafik */
.market-data-chart{
  width:180px !important;
  height:46px !important;
  cursor:pointer;
  pointer-events:auto;
}

/* Sütunlar arası çizgileri kaldır
   Sticky coin/puan ve kategori kolonlarının gölge/border ayrımı korunur. */
#crypto-table th:not(.col-coin),
#crypto-table td:not(.col-coin),
#category-table th:not(.cat-col1),
#category-table td:not(.cat-col1),
#market-data-table th,
#market-data-table td{
  border-right:0 !important;
  border-left:0 !important;
  box-shadow:none !important;
}

/* Market-Data tablosu – ilk sütun gizle */
#market-data-table thead th:first-child,
#market-data-table tbody td:first-child{
  display:none;
}

/* Kategori tablosu – puan sütunu */
#category-table th:nth-child(3){ text-align:left; }
#category-table td:nth-child(3){ padding-left:5px; padding-right:5px; }

/* Aktif filtre vurgusu */
.btn-has-filters{
  background:transparent !important;
  color:var(--text-color) !important;
  border:0 !important;
  border-bottom:2px solid var(--accent-color) !important;
  box-shadow:none !important;
}

/* “Puan” başlığı “i” alanı (ortalı) */
#crypto-table thead th.col-score .bottom-tooltip-wrapper{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

/* Tooltip'i üste taşı */
#crypto-table thead th.col-score .bottom-tooltip-text{
  top:auto !important;
  bottom:125% !important;
  left:50% !important;
  transform:translateX(-50%) translateY(0) !important;
  max-width:260px;
  white-space:normal;
}

/* Ok yönünü ters çevir */
#crypto-table thead th.col-score .bottom-tooltip-arrow{
  top:auto !important;
  bottom:calc(125% - 8px) !important;
  border-top-color:transparent !important;
  border-bottom:7px solid var(--tooltip-bg) !important;
  border-left:7px solid transparent !important;
}



/* PRV değer hücresi */
.fairvalue-sell-td, .fairvalue-buy-td{
  line-height:1.15;
  padding-top:4px;
  padding-bottom:4px;
}
.fv-line-main{ font-weight:400; }
.fv-line-sub{ font-size:11px; font-weight:400; opacity:.85; }
.fv-distance.fv-pos{ color: var(--pos-mix); }
.fv-distance.fv-neg{ color: var(--neg-mix); }

.fv-distance.fv-neutral{ opacity:.65; }

/* Global Tooltip */
.global-tooltip{
  position:fixed;
  top:0;
  left:0;
  z-index:2147483000;
  display:none;
  pointer-events:none;
  padding:8px 10px;
  border-radius:11px;
  font-size:12.25px;
  font-weight:520;
  line-height:1.35;
  max-width:min(300px, 92vw);
  text-align:left;
  white-space:normal;
  color:var(--tooltip-text, var(--text-color));
  background:color-mix(in srgb, var(--tooltip-bg, var(--card-bg)) 94%, transparent);
  border:1px solid color-mix(in srgb, var(--tooltip-border, var(--text-color)) 80%, transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* PRV header: Alt/Üst tıklanabilir alt başlık */
.fv-subbtn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* gridte sağ hücre sağa yaslıydı; bunu koruyoruz */
.fv-subbtn.sell{ justify-content:flex-end; }

/* mini sort icon */
.sortico-mini{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.55;
  pointer-events:none;
}
.sortico-mini svg{ width:14px; height:14px; display:block; }

/* okların default hali */
.sortico-mini .up,
.sortico-mini .down{ opacity:.45; }

/* Buy ok sağda / Sell ok solda */
.sortico-mini.right{ margin-left:2px; }
.sortico-mini.left{  margin-right:2px; }

/* aktif (asc/desc) durumunu data-state ile yöneteceğiz */
.fv-subbtn[data-state="asc"]  .sortico-mini{ opacity:.95; }
.fv-subbtn[data-state="asc"]  .sortico-mini .up{ opacity:1; }
.fv-subbtn[data-state="asc"]  .sortico-mini .down{ opacity:.15; }

.fv-subbtn[data-state="desc"] .sortico-mini{ opacity:.95; }
.fv-subbtn[data-state="desc"] .sortico-mini .up{ opacity:.15; }
.fv-subbtn[data-state="desc"] .sortico-mini .down{ opacity:1; }

/* -----------------------------------------------------------------------------
   10) Sparkline (tablo içi)
----------------------------------------------------------------------------- */
.sparkline-chart{ width:110px; height:30px !important; cursor:pointer; }

/* -----------------------------------------------------------------------------
   12) PF Floating Tooltip — V3 (koyu tema / premium)
   - Daha koyu (true-dark), kontrast kontrollü
   - Daha “premium flat”: temiz yüzey + rafine border/shadow
============================================================================= */

/* =============================================================================
   12) PF Floating Tooltip — V3 (premium + sade) — TOKEN ONLY
   - :root / dark-theme yok (sende zaten var)
   - Sabit renk yok, sadece mevcut token'lar
============================================================================= */

/* ──────────────────────────────────────────────────────────────────────────
   Backdrop (mobil overlay)
───────────────────────────────────────────────────────────────────────── */
#pf-tt-backdrop{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;

  z-index: 2147483646;

  background: rgba(0,0,0,.50);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .14s ease, visibility .14s ease;
}

#pf-tt-backdrop.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Floating container
───────────────────────────────────────────────────────────────────────── */
#pf-floating-tooltip{
  position: fixed;
  z-index: 2147483647;
  left: 0;
  top: 0;

  max-width: min(430px, 94vw);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translate3d(0,12px,0) scale(.985);
  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;
}

#pf-floating-tooltip.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
}

#pf-floating-tooltip.visible.mobile-modal{
  pointer-events: auto;
}

/* Touch cihazlarda (tablet dahil) modal ortalama */
@media (max-width:600px){
  #pf-floating-tooltip.mobile-modal{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(96vw, 430px);
    max-height: calc(100dvh - 10px);
    overflow: hidden;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  #pf-floating-tooltip.mobile-modal .pf-tt-card{
    max-height: calc(100dvh - 10px);
    padding: 9px 9px 8px;
    border-radius: 15px;
  }

  #pf-floating-tooltip.mobile-modal .pf-tt-head{
    padding-bottom: 8px;
    border-bottom:0;
  }

  #pf-floating-tooltip.mobile-modal .pf-tt-body{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 2px 6px 0;
  }

  #pf-floating-tooltip.mobile-modal .pf-tt-actions{
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 10%, transparent);
    gap: 7px;
  }
}

/* Tooltip içeriği çok uzarsa: ekranda kalsın */
#pf-floating-tooltip .pf-tt-card{
  max-height: calc(100dvh - 20px);
  overflow: hidden;
}

/* Masaüstünde SABİT genişlik: içerik (uzun "Skor Etkileri" etiketleri vb.)
   tooltip'i büyütüp küçültmesin. Çok dar pencerede 94vw ile sınırlanır. */
#pf-floating-tooltip:not(.mobile-modal) .pf-tt-card{
  width: min(374px, 94vw); /* sabit genişlik, %10 artırıldı (340→374) */
  box-sizing: border-box;
}

#pf-floating-tooltip .pf-tt-head,
#pf-floating-tooltip .pf-tt-actions{
  flex: 0 0 auto;
}

#pf-floating-tooltip .pf-tt-body{
  flex: 1 1 auto;
  min-height: 0;
}

/* Arrow */
#pf-floating-tooltip::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  left: var(--pf-tt-arrow-left, 22px);
  display:none;
  opacity:.98;

  background: var(--pf-tooltip-bg, var(--card-bg));
  transform: rotate(45deg);

  border: 1px solid var(--pf-tooltip-border, var(--divider-color));
  border-left:none;
  border-top:none;
}

#pf-floating-tooltip[data-position="right"]::after{
  display:block;
  top: var(--pf-tt-arrow-top, 22px);
  left:-6px;
  transform: rotate(135deg);
}

#pf-floating-tooltip[data-position="left"]::after{
  display:block;
  top: var(--pf-tt-arrow-top, 22px);
  left:auto;
  right:-6px;
  transform: rotate(-45deg);
}

#pf-floating-tooltip[data-position="center"]::after{
  display:none;
}

/* shell */
#pf-floating-tooltip .pf-tt-shell{
  background:transparent;
  pointer-events:auto;
}

/* Card */
.pf-tt-card{
  border-radius:18px;
  border: 1px solid var(--pf-tooltip-border, var(--divider-color));
  color: var(--pf-tooltip-text, var(--text-color));
  font-size: var(--pf-tt-font-size, 12px);

  background:
    radial-gradient(120% 140% at 10% 0%,
      color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 55%, var(--card-bg) 45%) 0%,
      var(--pf-tooltip-bg, var(--card-bg)) 55%
    );

  padding: 10px 11px 9px;
  display:flex;
  flex-direction:column;
  gap:4px;

  box-shadow:
    var(--pf-tooltip-shadow, 0 18px 45px rgba(0,0,0,0.25)),
    0 1px 0 color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 6%, transparent) inset;
}

/* header */
.pf-tt-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:3px 2px 5px;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.pf-tt-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pf-tt-sym{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:17px;
  font-weight:650;
  letter-spacing:.22px;
  line-height:1.05;
  color:var(--pf-tooltip-text, var(--text-color));
}

.pf-tt-sym::before{
  content:none !important;
  display:none !important;
}

/* right */
.pf-tt-right{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}

.pf-tt-price{
  font-size:15.5px;
  font-weight:610;
  line-height:1;
  letter-spacing:.08px;
  font-variant-numeric: tabular-nums;
  color:var(--pf-tooltip-text, var(--text-color));
}

/* main pct — düz (pill değil): renkli yazı */
.pf-tt-mainpct{
  font-size:12px;
  font-weight:610;
  line-height:1;

  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 82%, transparent);
}
.pf-tt-mainpct.up{
  color: color-mix(in srgb, var(--pos-mix) 92%, var(--pf-tooltip-text, var(--text-color)) 8%);
}
.pf-tt-mainpct.down{
  color: color-mix(in srgb, var(--neg-mix) 92%, var(--pf-tooltip-text, var(--text-color)) 8%);
}

/* chips */
.pf-tt-chips{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* düz (chip/pill değil): sade etiket + renkli değer */
.pf-tt-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-variant-numeric: tabular-nums;
  line-height:1;
}

.pf-tt-chip-k{
  font-style:normal;
  font-size:10.75px;
  font-weight:570;
  letter-spacing:.16px;
  color:color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 60%, transparent);
}

.pf-tt-chip-v{
  font-size:12.5px;
  font-weight:610;
}

.pf-tt-chip.up .pf-tt-chip-v{ color: var(--pos-mix); }
.pf-tt-chip.down .pf-tt-chip-v{ color: var(--neg-mix); }

/* çift sütun liste (sade: kart yok, yarı saydam ayraç çizgileri) */
.pf-tt-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:16px;
  row-gap:0;
}
/* yalnız son satırdaki hücrelerde alt çizgi olmasın (tek/çift sayıda çalışır) */
.pf-tt-grid .pf-tt-m:last-child,
.pf-tt-grid .pf-tt-m:nth-last-child(2):nth-child(odd){ border-bottom:0; }

.pf-tt-section-title{
  font-size:11px;
  font-weight:610;
  letter-spacing:.22px;
  text-transform:uppercase;
  opacity:.74;
  margin-bottom:2px;
}

.pf-tt-spark-wrap{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.pf-tt-spark-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}

.pf-tt-spark-head .pf-tt-section-title{
  margin-bottom:0;
}

.pf-tt-highlight-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 14%, transparent);
  background: color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 84%, transparent);
  color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 76%, transparent);
  border-radius:999px;
  padding:4px 9px;
  min-height:28px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.12px;
  line-height:1;
  cursor:pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .1s ease,
    box-shadow .16s ease;
}

@media (hover:hover){
  .pf-tt-highlight-toggle:hover{
    border-color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 24%, transparent);
    background: color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 72%, var(--card-bg) 28%);
    color: var(--pf-tooltip-text, var(--text-color));
  }
}

.pf-tt-highlight-toggle:active{
  transform: scale(.97);
}

.pf-tt-highlight-toggle[aria-pressed="true"]{
  border-color: color-mix(in srgb, var(--accent-color) 66%, transparent);
  background: color-mix(in srgb, var(--accent-color) 24%, var(--pf-tooltip-bg, var(--card-bg)) 76%);
  color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 98%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-color) 28%, transparent) inset,
    0 6px 18px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.pf-tt-spark{
  border:1px solid color-mix(in srgb, var(--pf-tooltip-border, var(--divider-color)) 90%, transparent);
  border-radius:14px;
  padding:6px 8px 4px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 90%, var(--card-bg) 10%),
      color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 96%, transparent)
    );
}

#pf-floating-tooltip .sparkline-chart{
  display:block;
  width:100% !important;
  max-width:none !important;
  height:64px !important;
  cursor:default;
}

.pf-tt-spark-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:4px;
}

.pf-tt-mini-stat{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:5px 4px;
  border:0;
  border-radius:0;
  background:none;
  font-size:11px;
  font-weight:610;
  letter-spacing:.12px;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* aralarında ince yarı saydam dikey ayraç */
.pf-tt-mini-stat + .pf-tt-mini-stat{
  border-left:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 9%, transparent);
}

.pf-tt-mini-stat[data-k="min"]{ color: var(--neg-mix); }
.pf-tt-mini-stat[data-k="avg"]{ color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 92%, transparent); }
.pf-tt-mini-stat[data-k="max"]{ color: var(--pos-mix); }

@media (max-width:560px){
  .pf-tt-spark-meta{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:4px;
  }

  .pf-tt-mini-stat{
    padding:5px 4px;
    font-size:10px;
    letter-spacing:0;
  }

  .pf-tt-highlight-toggle{
    min-height:26px;
    padding:4px 8px;
    font-size:10px;
  }
}

.pf-tt-grid--scores .pf-tt-m:first-child{
  border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
}

.pf-tt-grid--scores .pf-tt-m{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  padding:4px 2px;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.pf-tt-grid--scores .pf-tt-m-k{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--pf-tt-score-label-size, 10.5px);
  text-transform:none;
  letter-spacing:.08px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pf-tt-grid--scores .pf-tt-m-v{
  flex:0 0 auto;
  font-size:var(--pf-tt-score-value-size, 14px);
  line-height:1;
}

.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-low .pf-tt-m-k,
.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-low .pf-tt-m-v{
  color: color-mix(in srgb, var(--negative-color) 78%, var(--pf-tooltip-text, var(--text-color)) 22%);
}

.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-high .pf-tt-m-k,
.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-high .pf-tt-m-v{
  color: color-mix(in srgb, var(--positive-color) 78%, var(--pf-tooltip-text, var(--text-color)) 22%);
}

.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-low{
  border-color: color-mix(in srgb, var(--negative-color) 44%, var(--pf-tooltip-border, var(--divider-color)) 56%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--negative-color) 14%, var(--pf-tooltip-bg, var(--card-bg)) 86%),
      color-mix(in srgb, var(--negative-color) 8%, var(--pf-tooltip-bg, var(--card-bg)) 92%)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--negative-color) 12%, transparent) inset,
    0 10px 22px color-mix(in srgb, var(--negative-color) 10%, transparent);
}

.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-high{
  border-color: color-mix(in srgb, var(--positive-color) 44%, var(--pf-tooltip-border, var(--divider-color)) 56%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--positive-color) 14%, var(--pf-tooltip-bg, var(--card-bg)) 86%),
      color-mix(in srgb, var(--positive-color) 8%, var(--pf-tooltip-bg, var(--card-bg)) 92%)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--positive-color) 12%, transparent) inset,
    0 10px 22px color-mix(in srgb, var(--positive-color) 10%, transparent);
}

body:not(.dark-theme) .pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-low,
body:not(.dark-theme) .pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-high{
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 10%, transparent) inset,
    0 8px 20px color-mix(in srgb, var(--card-shadow, rgba(15,23,42,.12)) 55%, transparent);
}

/* Sade liste düzeninde vurgu modunda da kutu dönmesin — fark yazı renginde kalsın. */
.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-low,
.pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-high,
body:not(.dark-theme) .pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-low,
body:not(.dark-theme) .pf-tt-card.pf-tt-highlight-on .pf-tt-grid--scores .pf-tt-m.is-score-high{
  background:none;
  box-shadow:none;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 9%, transparent);
}

/* metrik satırı — sade: solda başlık, sağda değer, alta yarı saydam çizgi */
.pf-tt-m{
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:4px 2px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  border-bottom:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 9%, transparent);
}

.pf-tt-m-k{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--pf-tt-metric-label-size, 10.5px);
  text-transform:uppercase;
  letter-spacing:.26px;
  color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 62%, transparent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pf-tt-m-v{
  flex:0 0 auto;
  text-align:right;
  font-size:var(--pf-tt-metric-value-size, 12.5px);
  font-weight:610;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pf-tt-grid--metrics .pf-tt-m.is-prv .pf-tt-m-v{
  font-weight:430;
}

/* Skor Etkileri — sade liste (chip değil): düz etiket + renkli işaretli değer */
.pf-tt-grid--adjust .pf-tt-m-k{
  text-transform:none;
  letter-spacing:.04px;
  font-size:var(--pf-tt-score-label-size, 10.5px);
}
.pf-tt-m-v.pf-tt-adj-up{ color: var(--pos-mix); }
.pf-tt-m-v.pf-tt-adj-down{ color: var(--neg-mix); }

/* footer */
.pf-tt-foot{
  border-top:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 10%, transparent);
  padding-top:9px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pf-tt-score{
  flex:0 0 auto;
  min-width:92px;
  text-align:center;
  padding-right:10px;
  position:relative;
}

.pf-tt-score::after{
  content:"";
  position:absolute;
  right:0;
  top:4px;
  bottom:4px;
  width:1px;
  background: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 18%, transparent);
  opacity:.85;
}

.pf-tt-score-k{
  display:block;
  font-size:11px;
  font-weight:560;
  opacity:.80;
  margin-bottom:2px;
}

.pf-tt-score-v{
  font-size:15px;
  font-weight:620;
  letter-spacing:.12px;
}

.pf-tt-score-den{
  font-size:var(--pf-tt-metric-value-size, 12.5px);
  font-weight:610;
  opacity:.86;
  margin-left:2px;
}

/* tags */
.pf-tt-tags{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-end;
}

.pf-tt-tag{
  padding:3px 7px;
  border-radius:999px;

  border:1px solid color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 12%, transparent);
  background: color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 86%, transparent);

  font-size:11px;
  font-weight:610;
  opacity:.96;
  white-space:nowrap;

  box-shadow: 0 1px 0 color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 6%, transparent) inset;
}

/* actions */
.pf-tt-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

/* buttons */
.pf-tt-go,
.pf-tt-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  width:100%;
  min-height:38px;
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;

  font-size:11px;
  font-weight:620;
  letter-spacing:.12px;

  color: var(--pf-tooltip-text, var(--text-color));
  border:1px solid transparent;
  box-shadow:none;
}

.pf-tt-go{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-color) 78%, transparent),
      color-mix(in srgb, var(--accent-color) 62%, transparent)
    );
  border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}

.pf-tt-close{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background: color-mix(in srgb, var(--pf-tooltip-bg, var(--card-bg)) 78%, #000 22%);
  border-color: color-mix(in srgb, var(--pf-tooltip-text, var(--text-color)) 16%, transparent);
}

.pf-tt-go:active,
.pf-tt-close:active{ transform:scale(.985); }

/* trigger */
.pf-tt-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  -webkit-tap-highlight-color: transparent;
}

.pf-tt-trigger--text{
  justify-content:flex-start;
  min-width:0;
}

.pf-tt-trigger--text .coin-link-label{
  display:inline-block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.pf-tt-trigger--score{
  cursor:pointer;
}

.pf-tt-trigger--score .score-badge{
  cursor:pointer;
}

.pf-tt-trigger img.pf-coin-icon{
  width:20px;
  height:20px;
  border-radius:999px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

@media (hover:hover){
  .pf-tt-trigger:hover img.pf-coin-icon{
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--card-shadow, rgba(0,0,0,.15)) 85%, transparent);
  }

  .pf-tt-trigger--score:hover .score-badge{
    transform: translateY(-1px);
    filter: brightness(1.05);
  }

  #crypto-table td.col-coin .coin-link.pf-tt-trigger:hover .coin-link-label{
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Büyük ekranda alt aksiyon butonlarını gizle */
@media (min-width: 1025px){
  #pf-floating-tooltip .pf-tt-actions{ display:none !important; }
}

/* yüzde pill */
.pf-pct-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:3px 7px;
  border-radius:999px;

  font-weight:620;
  font-size:var(--pf-tt-score-value-size, 14px);
  line-height:1;
  font-variant-numeric: tabular-nums;

  border:1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);

  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent) inset;
}

.pf-pct-pill.up{
  color: var(--pos-mix);
  border-color: color-mix(in srgb, var(--pos-mix) 42%, transparent);
}
.pf-pct-pill.down{
  color: var(--neg-mix);
  border-color: color-mix(in srgb, var(--neg-mix) 42%, transparent);
}
.pf-pct-pill.flat{
  color: color-mix(in srgb, var(--text-color) 64%, transparent);
}
/* -----------------------------------------------------------------------------
   13) Market-Data — Dağılım Kutuları (tema-uyumlu, sade)
----------------------------------------------------------------------------- */
.md-distribution{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  position:relative;
  flex:1 1 auto;          /* kartın kalan yüksekliğini doldurur */
  min-height:0;
  padding-bottom:22px;    /* alt eksen etiketleri için yer */
}

.md-dist-title{
  font-weight:560;
  font-size:13.5px;
  letter-spacing:-.01em;
  line-height:1.3;
  color: color-mix(in srgb, var(--text-color) 92%, transparent);
}

.md-dist-grid{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:7px;
  flex:1 1 auto;       /* sabit 90px yerine kalan alanı doldur */
  height:auto;
  min-height:64px;
  padding:0 2px;
  position:relative;
}

.md-dist-seg{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 0;          /* eşit genişlik, kart genişliğini verimli kullan */
  width:auto;
  min-width:0;
  height:100%;         /* bar yüzdeleri buna göre çözülür */
  cursor:pointer;
  transition: transform .15s ease;
}

.md-dist-seg:hover{
  transform: translateY(-1px);
}

.md-dist-countwrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.md-dist-count{
  position:relative;
  z-index:3;
  background:transparent;
  padding:1px 0;
  border-radius:0;
  font-size:11px;
  font-weight:580;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--text-color) 72%, transparent);
  letter-spacing:-.01em;
}

.md-dist-pct{
  font-size:11px;
  font-weight:580;
  opacity:.92;
  font-variant-numeric:tabular-nums;
}

.md-dist-label{ display:none; }

.md-dist-bar{
  width:100%;
  min-height:6px;
  border-radius:5px 5px 0 0;
  position:relative;
  z-index:1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-color) 78%, transparent),
    color-mix(in srgb, var(--accent-color) 44%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  border-radius:6px 6px 3px 3px;
  transition: filter .15s ease, transform .15s ease;
}

.md-dist-seg:hover .md-dist-bar{
  filter: brightness(1.06) saturate(1.05);
}

.md-dist-seg.neg .md-dist-bar,
.md-dist-seg.low .md-dist-bar{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--negative-color) 90%, transparent),
    color-mix(in srgb, var(--negative-color) 52%, transparent));
}

.md-dist-seg.neu .md-dist-bar,
.md-dist-seg.mid .md-dist-bar{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-color) 82%, transparent),
    color-mix(in srgb, var(--accent-color) 46%, transparent));
}

.md-dist-seg.pos .md-dist-bar,
.md-dist-seg.high .md-dist-bar{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--positive-color) 90%, transparent),
    color-mix(in srgb, var(--positive-color) 52%, transparent));
}

.md-dist-seg.neg .md-dist-count,
.md-dist-seg.low .md-dist-count{
  color: var(--negative-color);
}

.md-dist-seg.neu .md-dist-count,
.md-dist-seg.mid .md-dist-count{
  color: var(--accent-color);
}

.md-dist-seg.pos .md-dist-count,
.md-dist-seg.high .md-dist-count{
  color: var(--positive-color);
}

.range-marker{
  position:absolute;
  bottom:2px;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:520;
  white-space:nowrap;
  text-align:center;
  line-height:1.2;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.range-marker .tick{
  width:1px;
  height:5px;
  background: color-mix(in srgb, var(--text-color) 28%, transparent);
  margin:0 auto 2px;
}

/* Bar üst tarafından taşan rozetlerin kırpılmaması için */
.md-dist-bar{ overflow:visible; }

/* Referans coin rozetleri — her referans (BTC/ETH/SOL/özel) düştüğü
   bucket'ın bar'ının iç-alt kısmında, küçük chip olarak görünür.
   Birden fazla coin aynı bucket'a düşerse dikey stack olarak sıralanır. */
.md-ref-coin-stack{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column-reverse;  /* en alt en aşağı */
  align-items:center;
  gap:2px;
  pointer-events:none;
  z-index:3;
  max-width:calc(100% + 8px);
}

.md-ref-coin-badge{
  display:inline-block;
  padding:1px 4px;
  border-radius:4px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  color: var(--text-color);
  border:1px solid color-mix(in srgb, var(--text-color) 18%, transparent);
  font-size:9px;
  font-weight:680;
  letter-spacing:.04em;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;
  white-space:nowrap;
}

/* -----------------------------------------------------------------------------
   14) Genel İkon stili
----------------------------------------------------------------------------- */
.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  height:1.15em;
  line-height:1;
  font-size:1.15em;
  cursor:pointer;
}

/* -----------------------------------------------------------------------------
   15) Modal (iskelet) & Chart modal başlıkları
----------------------------------------------------------------------------- */
.modal{ display:none; position:fixed; }

#modal-info-title{ font-size:18px; font-weight:560; }
#modal-info-subtitle{ font-size:14px; color:#555; }

/* -----------------------------------------------------------------------------
   16) Animasyonlar
----------------------------------------------------------------------------- */
.animated-update{ animation-duration:1s; animation-fill-mode:forwards; }

@keyframes price-up{
  0%{ color:#0f0; }
  100%{ color:inherit; }
}
@keyframes price-down{
  0%{ color:red; }
  100%{ color:inherit; }
}

.performance-bars>div{ height:7px !important; }

/* -----------------------------------------------------------------------------
   17) Coin ikonu + Favori overlay (+ / ×)  — MERKEZDE
----------------------------------------------------------------------------- */
.coin-icon-wrapper{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;

  /* ikon çevresinde hafif yüzey */
  background: color-mix(in srgb, var(--card-bg) 84%, transparent);
  border:1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent) inset;

  cursor:pointer; /* tıklanabilir imleç */
}

.coin-icon-wrapper img{
  width:22px;
  height:22px;
  border-radius:999px;
  display:block;

  pointer-events:none; /* tıklama/hover wrapper+overlay’e ait olsun */
}
.coin-icon-wrapper{
  transform: translateY(2px);
}
.score-badge{
  transform: translateY(0px);
}
@media (max-width: 600px){
  .score-badge{
    transform: translateY(2px);
  }
}


/* FAVORI COIN — %20 daha geniş açık mavimsi vurgulu çerçeve */
.coin-icon-wrapper.is-fav{
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(120, 180, 255, 0.34),
      rgba(120, 180, 255, 0.18) 46%,
      rgba(120, 180, 255, 0.11) 72%,
      transparent 74%
    );
  box-shadow:
    0 0 0 2.5px rgba(120, 180, 255, 0.82), /* 2px → 2.5px */
    0 0 15px rgba(120, 180, 255, 0.42);   /* 14px → 15px */
}


/* + / × overlay — TAM ORTA */
.coin-plus-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(.85);

  width:22px;
  height:22px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(18, 22, 30, 0.96);
  color:#f5f8ff;

  font-size:14px;
  font-weight:610;

  box-shadow:
    0 0 0 2px var(--card-bg),
    0 6px 14px rgba(0,0,0,.55);

  opacity:0;
  transition:.18s ease;

  cursor:pointer;  /* overlay üstünde de pointer */
  z-index:2;
}

/* gösterim (desktop hover + genel aktif durumlar) */
.coin-icon-wrapper:hover .coin-plus-overlay,
.coin-icon-wrapper:active .coin-plus-overlay{
  opacity:1;
}

/* hover destekli cihazlarda aynı davranış (net) */
@media (hover:hover){
  .coin-icon-wrapper:hover .coin-plus-overlay{
    opacity:1;
  }
}

/* favori iken overlay rengi (kırmızı yok) */
.coin-icon-wrapper.is-fav .coin-plus-overlay{
  background:rgba(80, 140, 220, 0.95);
  color:#ffffff;
}

/* -----------------------------------------------------------------------------
   18) Toast Bildirimleri
----------------------------------------------------------------------------- */
#toast-container{
  position:fixed;
  bottom:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:99999;
}

.toast-message{
  min-width:220px;
  padding:10px 15px;
  border-radius:8px;
  color:#fff;
  font-weight:520;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  opacity:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.toast-success{ background:#22c55e; }
.toast-warning{ background:#f59e0b; }
.toast-error{ background:#ef4444; }

@keyframes toastSlideIn{
  0%{ transform:translateY(100%); opacity:.5; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes toastSlideOut{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(100%); opacity:0; }
}
.toast-slide-in{ animation:toastSlideIn .5s forwards; }
.toast-slide-out{ animation:toastSlideOut .5s forwards; }

.undo-button{
  margin-left:10px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.7);
  border-radius:4px;
  padding:4px 6px;
  font-size:12px;
  color:#fff;
}

/* -----------------------------------------------------------------------------
   19) Market-Data Up/Down Bar
----------------------------------------------------------------------------- */
.updown-wrapper{ margin:8px 0; overflow-x:auto; }

#market-data-updown-container{
  --colW:82px;
  display:grid;
  grid-template-columns:repeat(8, minmax(var(--colW),1fr));
  align-items:end;
  gap:3px;
  min-height:90px;
  position:relative;
}

.updown-segment{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:6px 6px 0 0;
  cursor:pointer;
  transition:filter .25s;
}
.updown-segment:hover{ filter:brightness(1.10); }
.updown-segment.neg{ background:#ef4444; }
.updown-segment.pos{ background:#22c55e; }

.updown-segment .count{
  text-align:center;
  color:#fff;
  font-size:13px;
  font-weight:560;
  padding:6px 2px 0;
  line-height:1;
}

.updown-segment .range{
  text-align:center;
  color:#fafafa;
  font-size:12.5px;
  padding-bottom:6px;
  opacity:.90;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}

/* -----------------------------------------------------------------------------
   20) Kategori – Yükselen/Düşen barları (eski)
----------------------------------------------------------------------------- */
.performance-bars{ position:relative; cursor:pointer; }
.rf-bar{ height:7px; border-radius:8px; }
.rf-up{ background:green; }
.rf-down{ background:red; }
.rf-neutral{ background:orange; }

#rise-fall-tooltip{
  position:fixed;
  z-index:10000;
  display:none;
  pointer-events:none;
  background:#333;
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  font-size:14px;
  line-height:1.35;
  max-width:300px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  white-space:normal;
}

.rf-count{ margin-left:6px; font-weight:520; font-size:12px; color:#fff; opacity:.9; }
.rf-count.up{ color:#27d77d; }
.rf-count.down{ color:#ff6767; }

/* Kategori – Yükselen / Nötr / Düşen yüzdeleri (3 sütun) */
#category-table th.cat-col9,  #category-table td.cat-col9,
#category-table th.cat-col10, #category-table td.cat-col10,
#category-table th.cat-col11, #category-table td.cat-col11{
  width:clamp(var(--rf-col-min), var(--rf-col-vw), var(--rf-col-max));
  min-width:var(--rf-col-min);
  max-width:var(--rf-col-max);
  text-align:left;
  padding-left:6px;
  padding-right:6px;
  white-space:nowrap;
}

#category-table th.rf-h{ font-variant-numeric:tabular-nums; letter-spacing:-0.2px; }

.rf-cell .rf-pct{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3.2ch;
  padding:2px 6px;
  border-radius:999px;
  font-weight:560;
  font-size:12px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.08);
}

body.dark-theme .rf-cell .rf-pct{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.12);
}

.rf-pct.neutral{ color:var(--rf-neutral-color); }
.rf-pct.up{ color: var(--pos-mix); }
.rf-pct.down{ color: var(--neg-mix); }

/* -----------------------------------------------------------------------------
   21) Puan Rozeti + Gelişmiş Tooltip
----------------------------------------------------------------------------- */
.score-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:26px;
  font-weight:560;
  font-size:13px;
  color:#fff;
  letter-spacing:.3px;
  border-radius:8px;
  box-shadow:0 0 3px rgba(0,0,0,.2), inset 0 0 3px rgba(255,255,255,.08);
}
.score-badge.low{
  background:linear-gradient(145deg,#f56c6c,#d84343);
  box-shadow:0 0 4px 1px rgba(235,87,87,.5);
}
.score-badge.mid{
  background:linear-gradient(145deg,#ffc76a,#e49c32);
  box-shadow:0 0 4px 1px rgba(255,174,64,.45);
}
.score-badge.high{
  background:linear-gradient(145deg,#69d09b,#45a77c);
  box-shadow:0 0 4px 1px rgba(90,205,140,.4);
}

.score-cell{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  margin-top:0px;
}

/* Şablon tooltip’i gizle (içeriği JS alacak) */
.score-badge-wrapper .score-details-tooltip{ display:none !important; }

/* Sayfayı karartan katman (tooltip altında) */
/* Puan tooltip açıkken mobilde sayfayı kilitleyen katman */
#page-dim-overlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 12040;                /* tooltip (12050) altında kalsın */
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, visibility .14s ease;
}

#page-dim-overlay.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;          /* kritik: tıklamayı yakala */
}

/* Coin & Puan z-katmanı */
.category-name{ position:relative; z-index:2; }
.score-cell{ position:relative; z-index:1; }

/* Kategori yazı renkleri */
.category-name.fav{ color:#ffd700; }
.category-name.ex-high{ color:#22c55e; }
.category-name.ex-low{ color:#e63946; }
.category-name.custom{ color:#ff7f11; }

/* -----------------------------------------------------------------------------
   22) Market-Data — Kart Izgarası ve Kart Görünümü (tema-uyumlu)
----------------------------------------------------------------------------- */
.market-data-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
  grid-auto-rows: 168px;
  align-items: stretch;
}

.market-data-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  height:100%;
  padding: 14px 14px 12px;
  border-radius:14px;
  color: var(--text-color);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 100%, transparent),
      color-mix(in srgb, var(--card-bg) 92%, var(--accent-color) 4%));
  border:1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-color) 4%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-sizing: border-box;
  overflow:hidden;
}

@media (hover:hover){
  .market-data-card:hover{
    border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
    box-shadow:
      0 6px 16px color-mix(in srgb, var(--text-color) 10%, transparent),
      0 1px 0 color-mix(in srgb, var(--accent-color) 12%, transparent);
  }
}

.market-data-card:focus-within{
  outline:none;
  border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

body.dark-theme .market-data-card{
  border-color: color-mix(in srgb, var(--text-color) 14%, transparent);
  box-shadow: 0 3px 10px rgba(0,0,0,.30);
}

@media (hover:hover){
  body.dark-theme .market-data-card:hover{
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent);
    box-shadow:
      0 8px 18px rgba(0,0,0,.36),
      0 1px 0 color-mix(in srgb, var(--accent-color) 14%, transparent);
  }
}

.mdc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.mdc-name{
  font-weight:560;
  font-size:13.5px;
  letter-spacing:-.01em;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  color: color-mix(in srgb, var(--text-color) 92%, transparent);
}

.mdc-metrics{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  text-align:right;
  flex:0 0 auto;
  min-width:0;
}

.mdc-value{
  font-size:16px;
  font-weight:580;
  line-height:1.15;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.005em;
}

.mdc-change{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 8px;
  font-size:11.5px;
  font-weight:560;
  line-height:1.1;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  border-radius:999px;
  background: color-mix(in srgb, var(--text-color) 7%, transparent);
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}

.mdc-change.pos{
  color: var(--positive-color);
  background: color-mix(in srgb, var(--positive-color) 12%, transparent);
}

.mdc-change.neg{
  color: var(--negative-color);
  background: color-mix(in srgb, var(--negative-color) 12%, transparent);
}

.mdc-change.neu{
  color: color-mix(in srgb, var(--text-color) 72%, transparent);
  background: color-mix(in srgb, var(--text-color) 7%, transparent);
}

.mdc-chart{
  width:100% !important;
  height:78px !important;
  margin-top:auto;
  cursor:pointer;
  overflow:hidden;
  border-radius:6px;
  display:block;
}

.mdc-subtext,
.mdc-footer{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.market-data-card *{ min-width:0; }

.market-data-card.mdc-span-2{ grid-row: span 2; }

/* -----------------------------------------------------------------------------
   22-b) EMTİA & DOMİNANS BÖLÜMÜ — küçük kartlar yan yana, büyük
        karşılaştırma kartları (emtia + dominans) yan yana.
----------------------------------------------------------------------------- */
.commodity-section{ margin-top:22px; }

.commodity-section-title{
  margin:0 0 12px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  color: color-mix(in srgb, var(--text-color) 90%, transparent);
}

/* Döviz başlığındaki baz para birimi seçici (ok + açılır liste) */
.fxbase{ position:relative; display:inline-block; }
.fxbase-btn{
  display:inline-flex;
  align-items:center;
  gap:3px;
  border:0;
  background:transparent;
  padding:1px 2px;
  margin:0;
  font:inherit;
  font-weight:700;
  color: var(--accent-color);
  cursor:pointer;
  border-radius:6px;
  line-height:1;
}
.fxbase-btn:hover{ background: color-mix(in srgb, var(--accent-color) 12%, transparent); }
.fxbase-arr{ font-size:9px; opacity:.85; transform:translateY(1px); }
.fxbase-btn[aria-expanded="true"] .fxbase-arr{ transform:translateY(1px) rotate(180deg); }

.fxbase-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:40;
  min-width:148px;
  padding:5px;
  border-radius:11px;
  background: var(--card-bg);
  border:1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-color) 16%, transparent),
              0 2px 6px color-mix(in srgb, var(--text-color) 10%, transparent);
  display:flex;
  flex-direction:column;
  gap:1px;
}
.fxbase-menu[hidden]{ display:none; }
body.dark-theme .fxbase-menu{
  background: color-mix(in srgb, var(--card-bg) 80%, #000 20%);
  border-color: color-mix(in srgb, var(--text-color) 18%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.fxbase-opt{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:7px 9px;
  border-radius:8px;
  font:inherit;
  font-size:12.5px;
  font-weight:560;
  color: var(--text-color);
  cursor:pointer;
}
.fxbase-opt b{
  display:inline-flex;
  justify-content:center;
  min-width:18px;
  font-size:13px;
  color: color-mix(in srgb, var(--text-color) 75%, transparent);
}
.fxbase-opt:hover{ background: color-mix(in srgb, var(--accent-color) 14%, transparent); }
.fxbase-opt.is-active{
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
}
.fxbase-opt.is-active b{ color: var(--accent-color); }

/* Makro göstergeler kartı (ülke enflasyon + işsizlik) */
.macro-note{
  font-size:11px; font-weight:500;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
}
.mdc-macro .macro-main{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-top:2px;
}
.mdc-macro .macro-lbl{
  font-size:11.5px; font-weight:560;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
}
.mdc-macro .macro-big{
  font-size:19px; font-weight:600;
  font-variant-numeric: tabular-nums; letter-spacing:-.01em;
}
.mdc-macro .macro-big i{
  font-style:normal; font-size:10px; font-weight:500;
  opacity:.55; margin-left:2px;
}
.mdc-macro .macro-big.pos{ color: var(--positive-color); }
.mdc-macro .macro-big.neg{ color: var(--negative-color); }

/* Finansal kartlar: ana değer başlıkla aynı satırda, sağ üstte */
.mdc-market .mdc-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.mdc-market .mdc-name{ flex:1 1 auto; min-width:0; }
.mdc-market .macro-big{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:16px;
}
.mdc-market .macro-big i{ font-size:9.5px; }

/* Ülke makro kartı: enflasyon değeri başlık satırında sağ üstte; işsizlik
   sade/modern bir alt satırda (chip değil). */
.mdc-country .mdc-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.mdc-country .mdc-name{ flex:1 1 auto; min-width:0; }
.mdc-country .macro-big{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:16px;
}
.mdc-country .macro-big i{ font-size:9.5px; }

.mdc-country .macro-sub{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-top:3px;
  padding-top:5px;
  border-top:1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
}
.mdc-country .macro-sub-lbl{
  font-size:11px;
  font-weight:560;
  letter-spacing:.01em;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}
.mdc-country .macro-sub-val{
  font-size:13px;
  font-weight:600;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
}
.mdc-country .macro-sub-val i{
  font-style:normal; font-size:9.5px; opacity:.55; margin-left:2px; font-weight:500;
}

/* ── Market Data bölümleri (Piyasa Özeti / Dağılım / Skor / Dominans) ── */
.md-section{ margin-top:20px; }
.md-section:first-child{ margin-top:0 !important; }  /* Piyasa Özeti diğer sekmelerle hizalı başlasın */
.md-section > .commodity-section-title{ margin:0 0 12px; }

/* Dağılım / Skor / Dominans kartları büyük ekranda biraz daha kısa
   (Piyasa Özeti hariç; mobil dokunulmaz). */
@media (min-width: 601px){
  .md-section:not(.md-overview) .md-grid{ grid-auto-rows: 150px; }
}

/* Piyasa Özeti: 4 büyük kart (BTC dağılımı + Emtia/Dominans/Döviz karşılaştırma).
   SABİT sütun sayısı (auto-fit yok) → kartlar eklenirken genişlik yeniden
   hesaplanmaz, yanıp sönme olmaz. Yüklenirken gizli, hazır olunca tek seferde
   görünür. */
.md-section.md-overview{ transition: opacity .22s ease; }
.md-section.md-overview.md-overview-loading{ opacity:0; }

.md-overview .md-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* <1000px: 2 sütun (sabit) */
  grid-auto-rows:150px;     /* span 2 = 312px (~%10 azaltılmış) */
}
/* Büyük ekran: 4 kartı tek satırda tut */
@media (min-width:1000px){
  /* 4 kartı tek satırda tut + büyük ekranda yüksekliği %18 daha kıs (150 → 123) */
  .md-overview .md-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 123px;
  }
}
.md-overview .md-grid > .market-data-card{
  grid-column: span 1;
  grid-row: span 2;
  height:auto;
}
@media (max-width:600px){
  .md-overview .md-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows:auto;    /* mobil: azaltma yok, içerik kadar */
  }
  .md-overview .md-grid > .market-data-card{
    grid-column: 1 / -1;    /* mobilde tam genişlik, alt alta */
    grid-row: auto;
    min-height:0;
  }
}

/* Küçük kartlar (emtialar + Altın/Gümüş oranı) — kendi grid'i.
   Büyük ekranda sütun sayısı .market-data-grid ile AYNI (auto-fill 260px),
   mobilde 2 sütun (aşağıdaki media bloğunda). */
.commodity-section .commodity-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap:12px;
  grid-auto-rows:143px;    /* kart yüksekliği toplam ~%15 azaltıldı (168 → 143) */
  align-items:stretch;
}

/* Emtia kartı: ad + fiyat (tek satır head), altında 1G/7G/30G chip'leri,
   sonra sparkline ve aylık aralık. */
.mdc-commodity .mdc-head{
  align-items:baseline;
  gap:8px;
}
.mdc-commodity .mdc-name{ flex:1 1 auto; min-width:0; }
.mdc-commodity .mdc-value{ flex:0 0 auto; white-space:nowrap; }
.mdc-unit{ font-size:11px; opacity:.7; font-weight:500; }

.mdc-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:4px; }
.mdc-chip{
  display:inline-flex; align-items:center; gap:3px;
  padding:1px 7px; border-radius:999px;
  font-size:10.5px; font-weight:560;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--text-color) 7%, transparent);
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}
.mdc-chip i{ font-style:normal; opacity:.6; font-size:9.5px; }
.mdc-chip.pos{ color: var(--positive-color); background: color-mix(in srgb, var(--positive-color) 12%, transparent); }
.mdc-chip.neg{ color: var(--negative-color); background: color-mix(in srgb, var(--negative-color) 12%, transparent); }

.mdc-spark-wrap{ margin-top:auto; }
.mdc-cspark{ width:100%; height:30px; display:block; }
.mdc-cspark polyline{ fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.mdc-cspark.pos polyline{ stroke: var(--positive-color); }
.mdc-cspark.neg polyline{ stroke: var(--negative-color); }
.mdc-cspark.pos circle{ fill: var(--positive-color); }
.mdc-cspark.neg circle{ fill: var(--negative-color); }

.mdc-range{ margin-top:6px; }
.mdc-range-track{
  position:relative; height:4px; border-radius:999px;
  background: color-mix(in srgb, var(--text-color) 12%, transparent);
}
.mdc-range-marker{
  position:absolute; top:50%; width:7px; height:7px; border-radius:50%;
  transform: translate(-50%, -50%);
  background: var(--accent-color);
  box-shadow: 0 0 0 2px var(--card-bg);
}
.mdc-range-ends{
  display:flex; justify-content:space-between;
  margin-top:3px; font-size:9.5px;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Altın / Gümüş oranı kartı */
.mdc-ratio{ justify-content:center; }
.mdc-ratio-big{
  font-size:30px; font-weight:620; line-height:1;
  font-variant-numeric: tabular-nums;
  margin-top:2px;
}
.mdc-ratio-sub{ font-size:11.5px; color: color-mix(in srgb, var(--text-color) 65%, transparent); }
.mdc-ratio-toggle{
  cursor:pointer;
  text-decoration:underline dotted;
  text-underline-offset:2px;
  user-select:none;
  outline:none;
}
.mdc-ratio-toggle:hover,
.mdc-ratio-toggle:focus-visible{
  color: var(--accent-color);
  text-decoration-style:solid;
}
.mdc-ratio-prices{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:auto; font-size:11px;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Kur çevirici kartı */
.mdc-fxconv .fxconv{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:auto;
}
.mdc-fxconv .fxconv-row{
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  border-radius:9px;
  padding:5px 8px;
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
}
.mdc-fxconv .fxconv-in{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--text-color);
  font-size:14px;
  font-weight:580;
  font-variant-numeric: tabular-nums;
  outline:none;
}
.mdc-fxconv .fxconv-unit{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:560;
  color: color-mix(in srgb, var(--text-color) 62%, transparent);
}
.mdc-fxconv .fxconv-sel{
  flex:0 0 auto;
  border:1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
  border-radius:7px;
  background: var(--card-bg);
  color: var(--text-color);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  outline:none;
  max-width:48%;
  padding:3px 4px;
  -webkit-appearance:menulist;
  appearance:menulist;
}
/* Açılır liste seçenekleri (beyaz kalmasın) */
.mdc-fxconv .fxconv-sel option{
  background: var(--card-bg);
  color: var(--text-color);
}
body.dark-theme .mdc-fxconv .fxconv-sel{
  background: color-mix(in srgb, var(--card-bg) 80%, #000 20%);
  color: var(--text-color);
}
body.dark-theme .mdc-fxconv .fxconv-sel option{
  background:#1e2430;
  color:#e6e6e6;
}
.mdc-fxconv .fxconv-eq{
  align-self:center;
  font-size:13px;
  line-height:1;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
}

/* Karşılaştırma kartları (tablo) — küçük kartların arasına karışır:
   2 satır yüksekliğinde (2 kat) ve 2 sütun genişliğinde. */
.market-data-card.mdc-compare{
  grid-column: span 2;
  grid-row: span 2;
  height:auto;
  padding:10px 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.mdc-compare-wrap{ width:100%; flex:1; overflow:auto; }
.mdc-compare-table{
  width:100%; border-collapse:collapse;
  font-size:12px; font-variant-numeric: tabular-nums;
}

/* İki sütunlu karşılaştırma (Ülke makro): yarı yükseklik, tüm veri
   kaydırmadan iki tabloya bölünür. */
.market-data-card.mdc-compare-2col{
  grid-row: span 1;        /* iki kat değil, normal yükseklik (yarısı) */
  overflow:hidden;
  padding-top:2px;         /* üst boşluğu azalt (bu karta özel) */
}
.mdc-compare-2col .mdc-compare-cols{
  display:flex; gap:18px; width:100%; height:100%; align-items:flex-start;
}
.mdc-compare-2col .mdc-compare-cols > .mdc-compare-wrap{
  flex:1 1 0; min-width:0; overflow:hidden;
}
.mdc-compare-2col .mdc-compare-table th,
.mdc-compare-2col .mdc-compare-table td{ padding:3px 6px; }
@media (max-width:600px){
  .mdc-compare-2col .mdc-compare-cols{ gap:12px; }
  .mdc-compare-2col .mdc-compare-table th,
  .mdc-compare-2col .mdc-compare-table td{ padding:3px 4px; }
}
.mdc-compare-table th,
.mdc-compare-table td{
  padding:5px 6px; text-align:right; white-space:nowrap;
}
/* İlk sütun (Emtia / Dominans başlığı ve satır adları) sola yaslı */
.mdc-compare-table th:first-child,
.mdc-compare-table td:first-child{
  text-align:left;
}
.mdc-compare-table thead th{
  font-weight:600; font-size:11px;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
}
.mdc-compare-table tbody th{
  text-align:left; font-weight:560;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
}
.mdc-compare-table tbody tr + tr td,
.mdc-compare-table tbody tr + tr th{
  border-top:1px solid color-mix(in srgb, var(--text-color) 6%, transparent);
}
.mdc-compare-table td.pos{ color: var(--positive-color); }
.mdc-compare-table td.neg{ color: var(--negative-color); }
.mdc-compare-table td.neu{ color: color-mix(in srgb, var(--text-color) 60%, transparent); }
.mdc-compare-table td.mdc-cmp-now{
  color: color-mix(in srgb, var(--text-color) 80%, transparent);
  font-weight:560;
}

@media (max-width: 600px){
  /* Mobil: KÜÇÜK kartlar tek satırda 2 adet; YÜKSEK (karşılaştırma) kartlar
     tam genişlik, alt alta — böylece dominans kartının üstünde boşluk olmaz. */
  .commodity-section{ margin-top:16px; }
  .commodity-section-title{ font-size:13.5px; margin-bottom:8px; }

  .commodity-section .commodity-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows:127px;   /* toplam ~%15 azaltıldı (150 → 127) */
    gap:8px;
  }

  /* mdc-head tek satır: ad (sol) + fiyat (sağ) yan yana */
  .mdc-commodity .mdc-head,
  .mdc-ratio .mdc-head{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:6px;
  }
  .mdc-commodity .mdc-name,
  .mdc-ratio .mdc-name{
    -webkit-line-clamp:1;
    max-height:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Küçük kart iç düzeni — daralan genişliğe sığsın */
  .mdc-commodity{ padding:9px 9px 7px; }
  .mdc-chips{ gap:4px; margin-top:4px; }
  .mdc-chip{ padding:1px 6px; font-size:9.5px; }
  .mdc-chip i{ font-size:8.5px; }
  .mdc-cspark{ height:24px; }
  .mdc-range{ margin-top:4px; }
  .mdc-range-ends{ font-size:8.5px; }
  .mdc-unit{ font-size:10px; }

  /* Altın / Gümüş oranı */
  .mdc-ratio-big{ font-size:22px; }
  .mdc-ratio-sub{ font-size:10px; line-height:1.25; }
  .mdc-ratio-prices{ font-size:9.5px; gap:6px; }

  /* Karşılaştırma kartları (tablo): 2 sütun grid'de span 2 = tam genişlik,
     2 satır yükseklik. */
  .market-data-card.mdc-compare{
    padding:9px 10px;
  }
  .mdc-compare-table{ font-size:11px; }
  .mdc-compare-table th,
  .mdc-compare-table td{ padding:4px 5px; }
  .mdc-compare-table thead th{ font-size:10px; }
}

/* -----------------------------------------------------------------------------
   23) BTC Wallet Distribution — V4 (sade, tek satır per bucket)
----------------------------------------------------------------------------- */
#btcDistributionCard.btc2-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  padding:12px 12px 10px;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

#btcDistributionCard .btc2-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

#btcDistributionCard .btc2-title{
  font-weight:560;
  font-size:13.5px;
  letter-spacing:-.01em;
  line-height:1.25;
  color: color-mix(in srgb, var(--text-color) 92%, transparent);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#btcDistributionCard .btc2-sub{
  font-size:10.5px;
  line-height:1.2;
  color: color-mix(in srgb, var(--text-color) 56%, transparent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

#btcDistributionCard .btc2-list{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding-right:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Her satır tek hat: aralık | adres | bar | yüzde */
#btcDistributionCard .btc2-row{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;        /* aralık | adres | bar | yüzde HEP tek satır */
  align-items:center;
  gap:6px;
  padding:3px 0;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}

#btcDistributionCard .btc2-row:last-of-type{ border-bottom:0; }

#btcDistributionCard .btc2-range{
  font-weight:560;
  font-size:11.5px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
  font-variant-numeric:tabular-nums;
  flex:0 1 auto;
  min-width:0;
  max-width:92px;
}

#btcDistributionCard .btc2-addr{
  font-size:10.5px;
  font-weight:500;
  line-height:1.1;
  color: color-mix(in srgb, var(--text-color) 62%, transparent);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
  min-width:44px;
  white-space:nowrap;
  text-align:left;
}

#btcDistributionCard .btc2-bar{
  position:relative;
  flex:1 1 auto;
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  border:0;
  margin:0;
  min-width:18px;
}

#btcDistributionCard .btc2-fill{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  border-radius:999px;
}

#btcDistributionCard .btc2-fill.vol{
  background: color-mix(in srgb, var(--accent-color) 78%, transparent);
}

#btcDistributionCard .btc2-pct{
  font-size:10.5px;
  font-weight:580;
  line-height:1.1;
  color: color-mix(in srgb, var(--text-color) 76%, transparent);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
  min-width:36px;
  text-align:right;
  white-space:nowrap;
}

/* 1+ BTC özet satırı: belirgin */
#btcDistributionCard .btc2-row-summary{
  margin-top:4px;
  padding-top:7px;
  border-top:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  border-bottom:0;
}

#btcDistributionCard .btc2-row-summary .btc2-range{
  font-weight:620;
  color: var(--text-color);
}

#btcDistributionCard .btc2-row-summary .btc2-addr{
  color: color-mix(in srgb, var(--text-color) 80%, transparent);
}

#btcDistributionCard .btc2-row-summary .btc2-pct{
  color: var(--accent-color);
  font-weight:620;
}

/* ABD karşılaştırma dipnotu */
#btcDistributionCard .btc2-footnote{
  margin-top:3px;
  padding:1px 2px 0;
  font-size:10.5px;
  line-height:1.25;
  color: color-mix(in srgb, var(--text-color) 54%, transparent);
  font-style:italic;
}

/* -----------------------------------------------------------------------------
   24) Low Volume & Listing ikonları
----------------------------------------------------------------------------- */
.low-volume-icon, .listing-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  height:1.15em;
  line-height:1;
  font-size:1.15em;
  cursor:pointer;
}

.low-volume-icon{ color:#f39c12; }
.listing-icon{ position:relative; font-size:16px; margin-left:4px; cursor:pointer; }
.listing-new{ color:#22c55e; }
.listing-delist{ color:#ef4444; }

.low-volume-icon .tooltiptext,
.listing-icon .tooltiptext{
  background:#333;
  color:#fff;
  text-align:center;
  border-radius:6px;
  padding:5px;
  position:absolute;
  z-index:1;
  bottom:125%;
  left:50%;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s;
  font-size:13px;
}
.low-volume-icon .tooltiptext{ width:220px; margin-left:-110px; }
.listing-icon .tooltiptext{ width:230px; margin-left:-115px; }

.low-volume-icon:hover .tooltiptext,
.listing-icon:hover .tooltiptext{
  visibility:visible;
  opacity:1;
}

/* buy-info görünürlüğü */
.buy-info{ display:none; }
.buy-info.visible{ display:block; }

/* Sticky yardımcı */
.sticky{ position:sticky; top:0; z-index:100; background:inherit; }

/* -----------------------------------------------------------------------------
   25) Modal üstte görünüm — frame artık pf-kategori-finalize > UNIFIED MODAL
   katmanında. Buradaki eski `position:fixed; left:50%; top:50%;
   transform:translate(-50%,-50%)` kuralı, modern-modal'ın transform'unu
   pop-in animasyonunun çakıştırarak "sağ-altta açılıp ortaya kayma"
   görsel bug'ına sebep oluyordu. footer-bottom 34px padding de
   gereksizdi (unified compact footer kullanıyor).
----------------------------------------------------------------------------- */

/* Grid Checklist (modal içi) */
.grid-checklist{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:10px;
  align-items:start;
  padding:9px 10px;
}

.grid-checklist label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 2px 9px;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius:0;
  background:transparent;
  color:var(--text-color);
  font-weight:500;
  user-select:none;
  cursor:pointer;
  text-align:left;
  transition: color .18s ease, border-color .18s ease, transform .06s ease, opacity .18s ease;
}

.col-label-wrap{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}

.col-label-text{
  display:block;
  line-height:1.15;
  font-weight:540;
}

.col-label-sub{
  display:block;
  font-size:11px;
  line-height:1.2;
  color:color-mix(in srgb, var(--subtext-color) 92%, var(--text-color) 8%);
  opacity:.92;
}

.grid-checklist label:hover{
  box-shadow:none;
  color:var(--text-color);
  border-bottom-color: color-mix(in srgb, var(--accent-color) 44%, transparent);
}

.grid-checklist label:has(input[type="checkbox"]:checked){
  border-bottom-color:var(--accent-color);
}

/* Toggle switch */
.grid-checklist input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:40px;
  height:22px;
  border-radius:20px;
  background:var(--table-border-color);
  outline:none;
  cursor:pointer;
  transition:background .22s ease;
  flex:0 0 auto;
  margin-left:auto;
  order:2;
}

.grid-checklist input[type="checkbox"]::before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  background:var(--card-bg);
  border-radius:50%;
  transition: transform .22s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}

.grid-checklist input[type="checkbox"]:checked{ background:var(--primary-color); }
.grid-checklist input[type="checkbox"]:checked::before{ transform: translateX(18px); }

.grid-checklist label.locked{ opacity:.75; cursor:not-allowed; }
.grid-checklist label.locked input[type="checkbox"]{ opacity:.6; cursor:not-allowed; }
.grid-checklist label.locked input{ accent-color:#888; }

#crypto-columns-items.grid-checklist{ grid-template-columns:repeat(3, 1fr); }

/* -----------------------------------------------------------------------------
   26) Body modal-open davranışı
----------------------------------------------------------------------------- */
body.modal-open{ overflow-y:auto; touch-action:auto; }

/* -----------------------------------------------------------------------------
   27) Chip (tema uyumlu)
----------------------------------------------------------------------------- */
.chip{
  appearance:none;
  border:1px solid var(--chip-border, #e5e7eb);
  background:var(--chip-bg, #fff);
  color:var(--fg,#111827);
  padding:8px 12px;
  border-radius:999px;
  font:500 13px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
}
.chip:hover{ transform:translateY(-1px); }

.chip[aria-checked="true"], .chip.active{
  background:var(--primary,#4f46e5);
  color:#fff;
  border-color:var(--primary,#4f46e5);
}

body:not(.dark-theme){
  --chip-bg:#ffffff;
  --chip-border:#e5e7eb;
}
body.dark-theme{
  --chip-bg:#1f2937;
  --chip-border:#374151;
  --fg:#e5e7eb;
}

/* -----------------------------------------------------------------------------
   28) Kategoriler tabı – kolon ölçüleri tablo sisteminde yönetiliyor
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   29) COINLER TABI – davranış tablo sisteminde yönetiliyor
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   30) Koyu modda ikon çevresi beyaz
----------------------------------------------------------------------------- */
body.dark-theme #crypto-table .coin-icon-wrapper img{
  background:#fff;
  border-radius:50%;
  display:block;
  width:100%;
  height:100%;
  padding:1px;
  box-sizing:border-box;
}

body.dark-theme #category-table img[src*="./assets/png/"]{
  background:#ffffff;
  border-radius:50%;
  padding:1px;
  box-sizing:border-box;
  width:26px !important;
  height:26px !important;
  display:inline-block;
}

/* =============================================================================
   RESPONSIVE – EN SONDA BİRLEŞTİRİLDİ
============================================================================= */

/* -----------------------------------------------------------------------------
   A) MOBİL (≤600px) – TÜM MOBİL BLOKLAR TEK YERDE
----------------------------------------------------------------------------- */
@media (max-width:600px){

  /* mobileStickyHeader shortcuts padding */
  #mobileStickyHeader .mobile-shortcuts .mscroll{
    padding-bottom:2px;
    padding-top:2px;
  }

  /* Layout (container, top-row, tabs, #market-data-tab) kuralları
     pf-kategori-finalize ≤700 bloğunda tek katmanda yönetiliyor. */

  /* Eski JS hâlâ bu class'ı basarsa üst sekmeler kaybolmasın */
  #tabs-container.is-hidden{
    display:block !important;
  }

  /* REFERANS BORDER RENGİ */
  :root{
    --mobile-border-color:color-mix(in srgb, var(--text-color) 13%, transparent);
  }

  /* Arama, sağ-kontroller, clear-icon: layout pf-kategori-finalize ≤700'de. */

  @media (hover:hover){
    .clear-icon:hover{
      background:color-mix(in srgb, var(--negative-color, #ef4444) 72%, var(--card-bg) 28%);
      color:#fff;
    }
  }

  /* .mobile-controls-toggle, button/select layout & z-index: pf-kategori-finalize ≤700'de. */

  .mobile-toggle-inline{
    display:inline-flex;
    margin-left:auto;
    min-width:38px;
    min-height:36px;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
  }

  /* Crypto – 7g sütunu nowrap */
  #crypto-table th:nth-child(8),
  #crypto-table td:nth-child(8){
    white-space:nowrap;
  }

  /* Market-data updown container mobil */
  #market-data-updown-container{
    --colW:48px;
    min-height:68px;
  }

  .updown-segment .count{
    font-size:11px;
  }

  .updown-segment .range{
    font-size:9.5px;
  }

  /* rf kolonları mobil sıkı */
  :root{
    --rf-col-min:40px;
    --rf-col-max:58px;
    --rf-col-vw:6.2vw;
  }

  .rf-cell .rf-pct{
    font-size:11px;
    padding:2px 5px;
  }

  /* Global tooltip mobil ortala; başlık tooltip'i JS ile konumlanır. */
  .global-tooltip:not(#header-tooltip){
    left:50% !important;
    transform:translateX(-50%);
    max-width:92vw;
    word-wrap:break-word;
  }

  #header-tooltip{
    transform:none !important;
    max-width:92vw;
    word-wrap:break-word;
  }

  /* score-details-tooltip mobil */
  .score-details-tooltip{
    max-width:92vw;
    width:96vw !important;
    padding:12px 14px;
    top:8px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:99999 !important;
  }

  .score-details-tooltip .tooltip-header{
    font-size:15px;
  }

  .score-details-tooltip .metric-title{
    margin:6px 0 4px;
    font-size:14px;
  }

  .score-bar{
    height:5px;
  }

  /* ==========================================================================
     MARKET-DATA KARTLARI MOBİL (sade, sıkı, tema uyumlu)
  ========================================================================== */

  .market-data-grid{
    gap:6px;
    grid-auto-rows:minmax(160px, auto);   /* satırlar içeriğe göre uzayabilir (diğer kartlar <160 → 160 kalır) */
    grid-template-columns:repeat(2, minmax(0,1fr));
    padding:0 2px;
  }

  .market-data-card{
    padding:9px 10px 7px;
    border-radius:12px;
    gap:3px;
  }

  .mdc-head{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    padding-right:0;
  }

  .mdc-name{
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    font-size:12.2px;
    font-weight:560;
    line-height:1.22;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    max-height:calc(1.22em * 2);
    overflow:hidden;
  }

  .mdc-metrics{
    position:static;
    transform:none;
    align-items:flex-start;
    text-align:left;
    min-width:0;
    flex-direction:row;
    gap:6px;
    flex-wrap:wrap;
  }

  .mdc-value{
    font-size:13.5px;
    font-weight:580;
  }

  .mdc-change{
    font-size:10.5px;
    padding:1px 6px;
  }

  .mdc-chart{
    height:58px !important;
  }

  .market-data-card .md-distribution > span{
    font-size:12.5px;
    white-space:nowrap;
    font-weight:560;
  }

  .md-dist-grid{
    gap:4px;
    padding:0 1px;
    height:auto;
    min-height:54px;
  }

  .md-dist-seg{
    width:auto;
  }

  .md-dist-bar{
    min-height:4px;
    border-radius:5px 5px 2px 2px;
  }

  .md-dist-count{
    font-size:9.5px;
  }

  .range-marker{
    font-size:9px;
    bottom:1px;
  }

  .range-marker .tick{
    width:1px;
    height:4px;
  }

  .md-base-marker{
    width:1.5px;
  }

  .md-base-marker__label{
    font-size:9.5px;
  }

  /* BTC Distribution: mobilde 2 kolon kaplasın + ekstra kompakt
     (kullanıcı isteği: BTC kartının mobilde yüksekliği belirgin azalmalı).
     Span 2 yerine span 1 — kart artık tek satır pay alır; içerik sıkı
     satır padding (1px), küçük font ve azalan satır arası ile sığar. */
  #btcDistributionCard{
    grid-column:1 / -1;
    grid-row: span 1 !important;   /* yükseklik içeriğe göre otomatik (auto-row minmax) */
    height:auto !important;
    align-self:start !important;
  }

  #btcDistributionCard.btc2-card{
    padding:8px 10px 6px;
    height:auto !important;        /* grid hücresini doldurmasın → içeriğe göre */
  }

  #btcDistributionCard .btc2-head{
    margin-bottom:3px;
    gap:2px;
  }

  #btcDistributionCard .btc2-title{
    font-size:12px;
    line-height:1.15;
  }

  #btcDistributionCard .btc2-sub{
    font-size:9.5px;
    line-height:1.1;
  }

  #btcDistributionCard .btc2-list{
    gap:0;
    flex:0 0 auto !important;
    overflow:visible !important;
  }

  #btcDistributionCard .btc2-row{
    padding:1px 0;
    gap:5px;
    border-bottom-width:0;
  }

  #btcDistributionCard .btc2-range{
    font-size:10.5px;
    /* SABİT genişlik → barların başlangıcı tüm satırlarda hizalı (+%25: 64→80px). */
    flex:0 0 80px !important;
    width:80px !important;
    min-width:80px !important;
    max-width:80px !important;
  }

  #btcDistributionCard .btc2-addr{
    font-size:10px;
    /* Adres sütunu da sabit → bar başlangıcı tam hizalı. */
    flex:0 0 50px !important;
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    text-align:left;
  }

  #btcDistributionCard .btc2-bar{
    height:4px;
  }

  #btcDistributionCard .btc2-pct{
    font-size:10px;
    min-width:36px;
    font-weight:620;
  }

  #btcDistributionCard .btc2-row-summary{
    margin-top:2px;
    padding-top:4px;
  }

  /* ABD karşılaştırma dipnotu mobilde de GÖRÜNÜR (kullanıcı isteği). */
  #btcDistributionCard .btc2-footnote{
    display:block;
    font-size:9px;
    line-height:1.22;
    margin-top:2px;
    white-space:normal;
    font-style:italic;
  }

  /* "1+ BTC" özet satırı: mobilde adres metni uzun ("12.3K (45%)") → sabit genişlik
     yerine içeriğe göre; bar küçülebilsin → yüzde değer barın ALTINA düşmesin. */
  #btcDistributionCard .btc2-row-summary{ flex-wrap:nowrap !important; }
  #btcDistributionCard .btc2-row-summary .btc2-addr{
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    white-space:nowrap !important;
  }
  #btcDistributionCard .btc2-row-summary .btc2-bar{ min-width:16px !important; }
  #btcDistributionCard .btc2-row-summary .btc2-pct{ flex:0 0 auto !important; }

  /* Modal mobil layout: pf-kategori-finalize sonundaki "Unified Modal"
     katmanında alttan açılır çekmece (bottom-sheet) olarak yönetiliyor. */

  /* Grid checklist mobil */
  .grid-checklist{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }

  .grid-checklist label{
    padding:9px 10px;
  }

  /* Mobil – Input zoom engelleme */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  select,
  textarea{
    font-size:16px !important;
  }

  #modalSearchInput,
  .coin-search-input{
    font-size:16px !important;
  }
}
/* selected-filter-back ikonunu tam ortala */
#selected-filter-back{
  display:inline-flex;              /* inline yerine */
  align-items:center;
  justify-content:center;
  line-height:1;                    /* karakter baseline kaymasını kes */
  vertical-align:middle;
  width:30px;
  height:30px;
  padding:0;
}

/* is-visible display override: inline değil inline-flex olsun */
#selected-filter-back.is-visible{
  display:inline-flex !important;
}

/* (opsiyonel) okun optik ortası için minik düzeltme */
#selected-filter-back{
  transform: translateY(0.5px);     /* çok küçük optik düzeltme */
}

/* -----------------------------------------------------------------------------
   B) DİĞER BREAKPOINT’LER (komponent-spesifik)
----------------------------------------------------------------------------- */

/* max-width:768px – crypto columns checklist */
@media (max-width:768px){
  #crypto-columns-items.grid-checklist{ grid-template-columns:repeat(2, 1fr); }
}

/* max-width:480px – crypto columns checklist */
@media (max-width:480px){
  #crypto-columns-items.grid-checklist{ grid-template-columns:1fr; }
}

/* max-width:640px – tooltip küçük sıkılaştırma (orijinal şart korundu) */
@media (max-width:640px){
  #pf-floating-tooltip .coin-tt{ padding:9px 9px 8px; }
  #pf-floating-tooltip .coin-tt-grid{ column-gap:8px; }

  #pf-floating-tooltip .coin-tt-footer-left{
    flex-basis:20%;
    min-width:64px;
  }

  #pf-floating-tooltip .pf-tt-actions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
}

/* -----------------------------------------------------------------------------
   C) GENEL (tüm breakpointler) – kalan komponent ve durum kuralları
----------------------------------------------------------------------------- */

/* =========================
   Selected Filter UI = Single Chip Button
   - başlangıçta gizli
   - tek hover (icon/name ayrı hover yok)
   ========================= */

/* başlangıç: gizli */
#selected-filter-ui{
  display:none !important;
}

/* görünür olma tetikleyicisi: JS zaten name/back'a is-visible veriyor */
#selected-filter-ui:has(#selected-filter-back.is-visible),
#selected-filter-ui:has(#selected-filter-name.is-visible){
  display:inline-flex !important;
}

/* çizgisel seçili filtre görünümü */
#selected-filter-ui.selected-ui{
  align-items:center !important;
  gap:10px;
  padding:4px 2px 6px;
  border-radius:0;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
  background:transparent;
  color: var(--text-color);
  box-shadow:none;
  user-select:none;
  max-width:100%;
  min-height:34px;
  cursor:pointer;
  transition: border-color .18s ease, color .18s ease, transform .08s ease, opacity .18s ease;
}

@media (hover:hover){
  #selected-filter-ui.selected-ui:hover{
    border-bottom-color: color-mix(in srgb, var(--accent-color, #2d7cff) 55%, transparent);
    background:transparent;
    box-shadow:none;
  }
}
#selected-filter-ui.selected-ui:active{
  transform: scale(.99);
}

/* icon + text: görsel olarak chip’in parçası (ayrı hover yok) */
#selected-filter-ui #selected-filter-back,
#selected-filter-ui #selected-filter-name{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* ikon: sadece hizalama + ölçü (hover yok!) */
#selected-filter-ui #selected-filter-back{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:0;        /* çizgisel kontrol */
  font-size:18px;
  line-height:1;
  flex:0 0 auto;
  color:inherit;
  transform: translateY(.5px); /* optik merkez */
}

/* isim: tek satır ... */
#selected-filter-ui #selected-filter-name{
  display:block !important;
  font-weight:560;
  font-size:13.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55vw;
}

/* mobil kompakt */
@media (max-width:600px){
  #selected-filter-ui.selected-ui{
    padding:6px 2px 7px;
    border-radius:0;
    min-height:34px;
  }
  #selected-filter-ui #selected-filter-name{
    max-width:48vw;
  }
}


/* -------------------------------------------------
   Filtre butonu içi sayaç rozeti
   ------------------------------------------------- */

#open-crypto-filter-button{
  position: relative;
  padding-right: 22px; /* rozet için sağda alan */
}

/* Buton label stabil kalsın */
#open-crypto-filter-button .btn-label{
  display: inline-block;
}

/* Buton referans konteyner */
.filter-btn{
  position: relative;
}

/* Rozet */
#open-crypto-filter-button .filter-count-badge{
  position: absolute;
  top: -6px;                 /* sağ-üst köşe */
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 0px;

  display: none;             /* JS açıyor */
  align-items: center;
  justify-content: center;

  background: #ff4d4f;
  color: #ffffff;
  font-size: 11px;
  font-weight:560;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;

  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg-color);
  pointer-events: none;
}

/* 👇 Rozet içi yazı offset */
#open-crypto-filter-button .filter-count-badge::after{
  content: attr(data-count);
  transform: translateY(-15px);
  display: block;
}

/* Mobil ince ayar */
@media (max-width: 600px){
  #open-crypto-filter-button .filter-count-badge{
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    transform: translateY(0.4px);
  }
}

@media (max-width:600px){
  /* # kolonunu mobilde gizle */
  #crypto-table thead th.col-index,
  #crypto-table tbody td.col-index{
    display:none !important;
  }
}
/* === PRV BAND (PRV Alt + PRV Üst tek sütun · BAR YOK) ===================== */
.fvband-td{
  padding-top:4px;     /* satır şişmesin */
  padding-bottom:4px;
}

/* Bar kaldırıldı: artık sadece Buy | Sell */
.fvband{
  display:grid;
  grid-template-columns: 1fr 1fr; /* buy | sell */
  gap:10px;
  align-items:center;
}

.fvband .fvside{
  display:flex;
  flex-direction:column;
  gap:1px;            /* daha sıkı */
  line-height:1.02;   /* kompakt */
  min-width:0;
}

.fvband .fvside.buy{  text-align:left; }
.fvband .fvside.sell{ text-align:right; }

.fvband .fvside .lbl{
  font-size:10px;
  font-weight:570;
  opacity:.72;
  letter-spacing:.2px;
  text-transform:uppercase;
}

.fvband .fvside .val{
  font-size:12px;
  font-weight:590;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fvband .fvside .pct{
  font-size:11px;
  font-weight:570;
  font-variant-numeric: tabular-nums;
  line-height:1.0;
  opacity:.9;
  margin-top:1px;     /* değer altına çok küçük boşluk */
}

.fvband .fvside .pct.na{
  opacity:.55;
  color: var(--text-color);
}

/* Alt/Üst renkleri */
.fvband .fvside.buy  .val{ color: color-mix(in srgb, var(--positive-color) 80%, var(--text-color)); }
.fvband .fvside.sell .val{ color: color-mix(in srgb, var(--negative-color) 80%, var(--text-color)); }

.fvband .fvside.buy  .pct{ color: var(--pos-mix); }
.fvband .fvside.sell .pct{ color: var(--neg-mix); }


/* Eski bar / marker / pctrow artık kullanılmıyor: güvenlik amaçlı kapat */
.fvband .bar,
.fvband .range,
.fvband .marker,
.fvband .pctrow{
  display:none !important;
}

/* PRV body hücresinde özel hover yok; satırın genel hover'ı çalışsın */
@media (hover:hover){
  .fvband-td:hover{
    background: transparent !important;
  }
}
  th.col-fv-band,
  td.fvband-col{
    width:210px;
    min-width:210px;
    max-width:210px;
  }

/* === MOBİL: PRV Band sütununa özel genişlik =============================== */
@media (max-width:600px){
  /* sadece PRV band kolonu: header + td */
  th.col-fv-band,
  td.fvband-col{
    width:170px;
    min-width:170px;
    max-width:170px;
  }

  /* mobilde daha sıkı */
  .fvband{
    gap:5px;
  }

  /* istersen label'ları mobilde gizleyelim (yükseklik iyice düşer) */
  .fvband .fvside .lbl{
    display:none;
  }
}

/* === PRV Tooltip (tek bar) ============================================ */
.fvtt{ min-width: 210px; }
.fvtt-bar{
  position:relative;
  height:12px;
  margin:2px 0 6px;
}
.fvtt-track{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  height:8px;
  border-radius:999px;
  background: color-mix(in srgb, var(--text-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
}

.fvtt-m{
  position:absolute;
  top:50%;
  transform: translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:5px;
  pointer-events:none;
}

.fvtt-m i{
  width:12px; height:12px;
  border-radius:999px;
  background: var(--card-bg);
  border:2px solid color-mix(in srgb, var(--text-color) 25%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.fvtt-m b{
  font-size:11px;
  font-weight:600;
  opacity:.85;
}

.fvtt-buy  i{ border-color: color-mix(in srgb, var(--positive-color) 85%, white); }
.fvtt-cur  i{ border-color: color-mix(in srgb, var(--accent-color) 85%, white); }
.fvtt-sell i{ border-color: color-mix(in srgb, var(--negative-color) 85%, white); }

.fvtt-foot{
  display:flex;
  justify-content:flex-end;
  font-size:11px;
  font-weight:570;
  opacity:.9;
  font-variant-numeric: tabular-nums;
}

.fvtt-move{
  color: color-mix(in srgb, var(--text-color) 85%, white);
}
/* PRV hücresinde Alt→Üst % (sadece desktop) */
.fvband .fvprofit{
  grid-column: 1 / -1;
  text-align: center;
  font-size: 9px;
  font-weight:500;
  opacity: .72;
  margin-top: 4px;
  letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
}
.fvband .fvprofit.pos{ color: var(--positive-color, #00b86b); }
.fvband .fvprofit.neg{ color: var(--negative-color, #ef4444); }
.fvband .fvprofit.neu{ opacity: .70; }

/* Mobilde gösterme */
@media (max-width: 600px){
  .fvband .fvprofit{ display:none; }
}

/* PRV header: sol-üst hizalama */
.fvband-th{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* ✅ ortalama yok */
  gap:2px;
  text-align:left;
}

.fvband-th-title{
  align-self:flex-start;    /* ✅ */
}

/* Buy solda, Sell sağda (ama genel hizalama start) */
.fvband-th-sub{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:10px;
  width:100%;
  justify-items:start;      /* ✅ ortalama yok */
  align-items:start;
}

.fvband-th-sub .fv-subbtn.sell{
  justify-self:end;         /* ✅ sağa yaslı kalsın */
}




.fvband-th-sub span:last-child{ text-align:right; }

/* ✅ PRV Alt/Üst mini ok state (spesifik + override garantili) */
.fvband-th-sub .fv-subbtn[data-state="asc"]  .sortico-mini{ opacity:.95 !important; }
.fvband-th-sub .fv-subbtn[data-state="asc"]  .sortico-mini .up{   opacity:1   !important; }
.fvband-th-sub .fv-subbtn[data-state="asc"]  .sortico-mini .down{ opacity:.12 !important; }

.fvband-th-sub .fv-subbtn[data-state="desc"] .sortico-mini{ opacity:.95 !important; }
.fvband-th-sub .fv-subbtn[data-state="desc"] .sortico-mini .up{   opacity:.12 !important; }
.fvband-th-sub .fv-subbtn[data-state="desc"] .sortico-mini .down{ opacity:1   !important; }

/* PRV profit % tamamen kapalı */
.fvband .fvprofit{ display:none !important; }

/* sortable header hücresi: içerik yukarıdan başlar; ana ok artık başlık metninin sol-alt çizgisindedir */
#crypto-table th.sortable,
#category-table th.sortable-category{
  vertical-align:top;
}

#crypto-table th.sortable .sort-icon,
#crypto-table th.sortable .sortico,
#category-table th.sortable-category .sortico{
  position:static;
  inset:auto;
  transform:none;
  margin:0;
}
/* PRV sütunu: başlık metni ortalı */
#crypto-table th.col-fv-band .fvband-th-title{
  width:100%;
  text-align:center;
  align-self:center;
  padding-left:20px;
  padding-right:20px;
}

/* PRV HEADER: genel başlık hover'ına uysun, sadece ikon parlaması ek kalsın */
#crypto-table th.col-fv-band .sortico-mini,
#crypto-table th.col-fv-band .sort-icon,
#crypto-table th.col-fv-band .sortico{
  opacity:.45;
  filter:none;
  transition: opacity .12s ease, filter .12s ease;
}

/* Ana başlık hover'ı ile ana ikon da netleşsin */
@media (hover:hover){
  #crypto-table th.col-fv-band:hover .sort-icon,
  #crypto-table th.col-fv-band:hover .sortico{
    opacity:1;
    filter:drop-shadow(0 0 10px rgba(255,255,255,.22));
  }

  #crypto-table th.col-fv-band .fvband-th-sub .fv-subbtn.buy:hover .sortico-mini,
  #crypto-table th.col-fv-band .fvband-th-sub .fv-subbtn.sell:hover .sortico-mini{
    opacity:1 !important;
    filter:drop-shadow(0 0 10px rgba(255,255,255,.22));
  }

  #crypto-table th.col-fv-band .fvband-th-sub .fv-subbtn:hover .sortico-mini .up,
  #crypto-table th.col-fv-band .fvband-th-sub .fv-subbtn:hover .sortico-mini .down{
    filter:none;
  }

  #crypto-table th.col-fv-band .fvband-th-sub .fv-subbtn[data-state="asc"]:hover .sortico-mini .down{ opacity:.10 !important; }
  #crypto-table th.col-fv-band .fvband-th-sub .fv-subbtn[data-state="desc"]:hover .sortico-mini .up{ opacity:.10 !important; }
}

@supports selector(:has(*)){
  @media (hover:hover){
    #crypto-table th.col-fv-band:has(.fvband-th-sub .fv-subbtn:hover) .fvband-th-title{
      filter:none !important;
      opacity:inherit !important;
      transform:none !important;
    }
  }
}

/* Sticky/table final override yığını kaldırıldı; temiz konsolide blok kullanılıyor. */

/* sparkline canvas (opsiyonel) *//* sparkline canvas (opsiyonel) */
canvas[id$="-30d-chart"]{
  border-radius: 0px;
  filter: drop-shadow(0 0 8px rgba(0, 220, 255, .18));
}

/* th-micro: alt satırda önce açıklama, ardından sort oku gelir */
.th-micro{
  display:inline-flex !important;
  width:auto;
  min-width:0;
  margin-left:0 !important;
  margin-top:0;
  line-height:1.16;
  white-space:normal !important;
  opacity:.78;
}

/* Başlık içi yardımcı wrapper'lar da satır genişletmesin */
#crypto-table thead th .bottom-tooltip-wrapper,
#category-table thead th .bottom-tooltip-wrapper,
#market-data-table thead th .bottom-tooltip-wrapper{
  display:flex;
  width:100%;
  justify-content:flex-start;
  margin-top:4px;
}

/* -----------------------------------------------------------------------------
   Grafik zemin temizliği — sadece çizginin altına doğru azalan dolgu kalsın
   Desktop + mobil tüm grafiklerde canvas/wrapper arka planı ve çerçevesi kapalı.
----------------------------------------------------------------------------- */
.sparkline-chart,
.market-data-chart,
#crypto-table canvas[id$="-30d-chart"],
#pf-floating-tooltip .sparkline-chart{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.pf-tt-spark{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0 2px !important;
}



/* =============================================================================
   31) Portföyrehberim sade/pro uygulama yüzeyi — entegre final düzen
============================================================================= */

@media (min-width:901px){
  #top-row{
    min-height:52px;
  }

  #crypto-content.table-wrapper,
  #categories-content.table-wrapper,
  #category-content.table-wrapper,
  #market-data-content.table-wrapper{
    border-radius:16px;
    background:transparent;
  }
}

#open-crypto-filter-button,
#open-crypto-columns-button,
#open-lists-options-button,
#open-favorites-options-button,
#open-market-filter-button,
#timeframe-dropdown{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#open-crypto-filter-button.btn-has-filters,
.btn-has-filters{
  background:transparent !important;
  color:var(--text-color) !important;
  border:0 !important;
  border-bottom:2px solid var(--accent-color) !important;
  box-shadow:none !important;
}

.filter-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  margin-left:6px;
  padding:0 5px;
  border-radius:999px;
  font-size:11px;
  font-weight:560;
  color:#fff;
  background:var(--accent-color);
}

#crypto-table thead th,
#category-table thead th,
#favorites-table thead th,
#market-data-table thead th{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-transform:none;
}

#crypto-table tbody td,
#category-table tbody td,
#favorites-table tbody td,
#market-data-table tbody td{
  letter-spacing:-.005em;
}

#crypto-table td.col-coin .coin-link{
  font-weight:520!important;
}

#crypto-table .score-badge,
#category-table .score-badge,
#favorites-table .score-badge{
  box-shadow:none !important;
  border:1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* Puan rozeti (crypto tablo gövdesi): arka plan + çerçeve + gölge kaldırıldı.
   Sayı rengi skora göre dinamik — düşük=kırmızı, orta=sarı/amber, yüksek=yeşil.
   Daha sade, daha az dikkat çeken görünüm. */
#crypto-table .score-badge,
#category-table .score-badge,
#favorites-table .score-badge{
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  border-radius:0 !important;
  color:inherit !important;
  font-weight:680 !important;
}
#crypto-table .score-badge.low,
#category-table .score-badge.low,
#favorites-table .score-badge.low{  color:var(--negative-color,#ef4444) !important; }
#crypto-table .score-badge.mid,
#category-table .score-badge.mid,
#favorites-table .score-badge.mid{  color:#f59e0b !important; }
#crypto-table .score-badge.high,
#category-table .score-badge.high,
#favorites-table .score-badge.high{ color:var(--positive-color,#22c55e) !important; }

#crypto-table .sparkline-chart,
.market-data-chart{
  opacity:.92;
}

/* Pagination ve mobil layout kuralları pf-kategori-finalize bloğunda. */


/* ==== from <style> block 2 (orig lines 14912-16721) <style id="pf-kategori-finalize"> ==== */
/* =============================================================================
   KATEGORİ — TEK KATMAN FINAL STİL
   Önceki override blokları (best-category-tab, fv-split-and-header-fix,
   crypto-pagination-mobile-fix-v2, final-professional-polish) buraya
   birleştirildi. Dosyada başka override <style> bloğu kalmamalıdır.
============================================================================= */

/* -----------------------------------------------------------------------------
   1) Dinamik kategori sekmeleri + overflow ("Diğer ▼") menüsü
   - 3 sabit sekme (Coinler, Kategoriler, Market Data) sonrasında
     .pf-dyn-tab class'lı kategori sekmeleri inline yazılır
   - Masaüstünde sığmazsa fazlası "Diğer" toggle'a düşer
   - Mobilde overflow yok; yatay scroll
----------------------------------------------------------------------------- */
body.pf-best-category-mode #selected-filter-ui{ display:none !important; }

/* Dinamik sekme — temel görünüm (.tab kuralları üzerine sade vurgu) */
#tabs .pf-dyn-tab{
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Overflow toggle: "Diğer ▼" — küçük caret + tab gibi */
#tabs #pf-dyn-more-toggle.pf-dyn-more-toggle{
  position:relative;
  padding-right:22px;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#tabs #pf-dyn-more-toggle.pf-dyn-more-toggle::after{
  content:"";
  position:absolute;
  right:8px;
  top:calc(50% - 1px);
  width:7px;
  height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:center;
  opacity:.78;
  pointer-events:none;
  transition:transform .16s ease, opacity .16s ease, top .16s ease;
}

#tabs #pf-dyn-more-toggle.pf-dropdown-open::after{
  top:calc(50% + 2px);
  transform:translateY(-50%) rotate(225deg);
  opacity:.95;
}

/* Overflow dropdown menüsü */
#pf-dyn-overflow-menu{
  position:fixed;
  left:0;
  top:0;
  display:none;
  min-width:220px;
  max-width:min(340px, calc(100vw - 16px));
  padding:6px;
  border-radius:12px;
  background:color-mix(in srgb, var(--card-bg) 96%, #000 4%);
  border:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  box-shadow:0 18px 42px rgba(0,0,0,.20);
  z-index:2147483200;
}

#pf-dyn-overflow-menu.is-open{ display:block; }

#pf-dyn-overflow-menu .pf-dyn-option{
  display:block;
  width:100%;
  padding:10px 2px 9px;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius:0;
  background:transparent;
  color:var(--text-color);
  text-align:left;
  font:inherit;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (hover:hover){
  #pf-dyn-overflow-menu .pf-dyn-option:hover{
    background:transparent;
    color:var(--text-color);
    border-bottom-color:color-mix(in srgb, var(--accent-color) 48%, transparent);
  }
}

#pf-dyn-overflow-menu .pf-dyn-option:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent-color) 70%, white);
  outline-offset:1px;
}

/* -----------------------------------------------------------------------------
   2) PRV Alt / PRV Üst — split hücre görünümü
----------------------------------------------------------------------------- */
.fvbuy-td,
.fvsell-td{ line-height:1.12; }

.fv-split-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  min-width:0;
}

.fv-split-cell .fv-main{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:inherit;
  font-weight:430;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}

.fv-split-cell .fv-sub{
  display:block;
  max-width:100%;
  min-height:1em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.25px;
  font-weight:430;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--pf-table-muted, color-mix(in srgb, var(--text-color) 68%, transparent));
}

.fv-split-cell .fv-sub.is-pos{ color:var(--pos-mix); opacity:.88; }
.fv-split-cell .fv-sub.is-neg{ color:var(--neg-mix); opacity:.88; }
.fv-split-cell .fv-sub.is-neutral,
.fv-split-cell .fv-sub.is-na,
.fv-split-cell .fv-sub.is-zero-dash{
  color:var(--pf-table-muted, var(--text-color));
  opacity:.72;
}

/* -----------------------------------------------------------------------------
   3) Pagination — sade ve modern (taban kurallar)
----------------------------------------------------------------------------- */
#crypto-pagination.crypto-pagination{
  display:none;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  clear:both;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--text-color);
  overflow:visible;
}

#crypto-content.active + #crypto-pagination.crypto-pagination{ display:flex; }

/* "1-40 / 1142 coin" bilgi yazısı gizlendi (kullanıcı isteği). */
#crypto-pagination.crypto-pagination .crypto-page-info{
  display:none !important;
}

/* Bilgi yazısı kalkınca sayfa butonları bölümü tam genişlik kaplasın + ortalı. */
#crypto-pagination.crypto-pagination .crypto-page-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  flex:1 1 100%;
  width:100%;
  min-width:0;
}

#crypto-pagination.crypto-pagination .crypto-page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  min-width:32px;
  padding:0 10px;
  box-sizing:border-box;
  font-size:12px;
  font-weight:520;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

#crypto-pagination.crypto-pagination .crypto-page-btn:active{
  transform:translateY(1px);
}

#crypto-pagination.crypto-pagination .crypto-page-btn:disabled{
  opacity:.34;
  cursor:not-allowed;
  background:transparent;
  border-bottom-color:transparent;
}

#crypto-pagination.crypto-pagination .crypto-page-select{ display:none !important; }

#crypto-pagination.crypto-pagination .crypto-page-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:32px;
  opacity:.52;
  font-size:13px;
  font-weight:590;
  user-select:none;
}

@media (hover:hover){
  #crypto-pagination.crypto-pagination .crypto-page-btn:not(:disabled):hover{
    transform:translateY(-1px);
    color:var(--text-color);
    border-bottom-color:color-mix(in srgb, var(--accent-color) 50%, transparent);
    background:transparent;
  }
}

/* -----------------------------------------------------------------------------
   4) Tablet & mobil (≤768px) — sekme grid yerleşimi
----------------------------------------------------------------------------- */
@media (max-width:768px){
  #tabs-container{
    position:relative;
    padding-right:0;
  }

  #tabs{
    width:100%;
    gap:4px;
    padding:2px 40px 2px 4px !important;
    overflow:visible !important;
  }

  #tabs .tab{
    flex:1 1 0 !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.06 !important;
    padding:6px 0 !important;
    font-size:12.5px !important;
  }

  /* Mobil/tablet: dinamik sekmeler de inline akar; overflow yok */
  #pf-dyn-overflow-menu,
  #pf-dyn-overflow-menu.is-open{ display:none !important; }

  #tabs #pf-dyn-more-toggle{ display:none !important; }

  #tabs .pf-dyn-tab{
    flex:0 0 auto !important;
    min-width:88px !important;
    max-width:160px !important;
    padding:6px 8px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    line-height:1.06 !important;
    font-size:12.5px !important;
  }
}

/* -----------------------------------------------------------------------------
   5) Masaüstü / genel son görünüm
----------------------------------------------------------------------------- */
#main-container{
  background:
    radial-gradient(900px 360px at 12% -8%, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 62%),
    radial-gradient(760px 320px at 88% 0%, color-mix(in srgb, var(--positive-color) 6%, transparent), transparent 60%),
    var(--bg-color) !important;
}

#container{
  width:min(100%, var(--pf-page-max, 1760px)) !important;
  margin-inline:auto !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  gap:4px !important;
}

#top-row{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--pf-surface-line, color-mix(in srgb, var(--text-color) 9%, transparent)) !important;
  padding:0px 0 10px !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}

/* Masaüstü: sekme kabı sabit pay alır; içerik taşmaya çalışırsa kırpılır
   (JS reflowOverflow gerçek overflow'u algılayıp "Diğer" toggle ekler).
   Sağ kontroller sabit genişlikte tutulur. */
#tabs-container{
  flex:1 1 0 !important;
  min-width:0 !important;
  overflow:hidden !important;
}

#right-top-controls{
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
}

#tabs{
  gap:14px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
}

#tabs .tab,
#tabs span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  line-height:1.08 !important;
  padding:10px 10px 4px !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  color:color-mix(in srgb, var(--text-color) 78%, transparent) !important;
  font-size:14px !important;
  font-weight:500!important;
  letter-spacing:.01em !important;
  box-shadow:none !important;
}

#tabs .tab:hover,
#tabs span:hover{
  color:var(--text-color) !important;
  background:transparent !important;
  border-bottom-color:color-mix(in srgb, var(--text-color) 18%, transparent) !important;
}

#tabs .tab.active,
#tabs span.active{
  color:var(--text-color) !important;
  background:transparent !important;
  border-bottom-color:var(--accent-color) !important;
}

#right-top-controls button,
#right-top-controls select,
#search-input{
  border-radius:0 !important;
  border:0 !important;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 14%, transparent) !important;
  background:transparent !important;
  color:var(--text-color) !important;
  box-shadow:none !important;
  font-weight:500!important;
}

#right-top-controls button:hover,
#right-top-controls select:hover,
#search-input:hover{
  background:transparent !important;
  border-bottom-color:color-mix(in srgb, var(--accent-color) 46%, transparent) !important;
}

#crypto-table thead th,
#category-table thead th,
#favorites-table thead th,
#market-data-table thead th{
  background:var(--pf-table-head-bg) !important;
  color:var(--pf-table-head-text) !important;
  font-weight:540!important;
  padding-left:3px !important;
  padding-right:3px !important;
}

#crypto-table tbody td,
#category-table tbody td,
#favorites-table tbody td,
#market-data-table tbody td{
  font-weight:460!important;
  padding-left:3px !important;
  padding-right:3px !important;
}

#crypto-pagination.crypto-pagination{
  margin:6px 0 0 !important;
  padding:6px 2px max(8px, var(--pf-safe-bottom)) !important;
  background:transparent !important;
  border:0 !important;
}

#crypto-pagination.crypto-pagination .crypto-page-info{
  background:transparent !important;
  border:0 !important;
  padding-inline:2px !important;
  color:color-mix(in srgb, var(--text-color) 58%, transparent) !important;
  font-weight:500!important;
}

#crypto-pagination.crypto-pagination .crypto-page-btn{
  border-radius:0 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:var(--text-color) !important;
  font-weight:520!important;
  box-shadow:none !important;
}

#crypto-pagination.crypto-pagination .crypto-page-btn:hover{
  background:transparent !important;
  border-bottom-color:color-mix(in srgb, var(--accent-color) 46%, transparent) !important;
}

#crypto-pagination.crypto-pagination .crypto-page-btn.is-active,
#crypto-pagination.crypto-pagination .crypto-page-btn.active,
#crypto-pagination.crypto-pagination .crypto-page-btn[aria-current="page"]{
  background:transparent !important;
  border-bottom-color:var(--accent-color) !important;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.remove-btn-row button,
.modal-footer button{
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text-color) !important;
  box-shadow:none !important;
  padding:8px 2px 6px !important;
  font-weight:560 !important;
  cursor:pointer;
}

.btn-primary,
.modal-footer button[type="submit"]{
  border-bottom-color:var(--accent-color) !important;
}

.btn-danger,
#remove-confirm-yes{
  color:var(--negative-color) !important;
  border-bottom-color:color-mix(in srgb, var(--negative-color) 72%, transparent) !important;
}

.btn-secondary,
#remove-confirm-no{
  color:color-mix(in srgb, var(--text-color) 72%, transparent) !important;
}

@media (hover:hover){
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-danger:hover,
  .remove-btn-row button:hover,
  .modal-footer button:hover{
    background:transparent !important;
    color:var(--text-color) !important;
    border-bottom-color:var(--accent-color) !important;
  }

  .btn-danger:hover,
  #remove-confirm-yes:hover{
    color:var(--negative-color) !important;
    border-bottom-color:var(--negative-color) !important;
  }
}

/* =============================================================================
   MOBİL — sabit üst alan + sadece tablo gövdesi scroll
   Bu katman eski "sayfa scroll + viewport sticky" mantığını kapatır.
============================================================================= */
@media (max-width:700px){
  :root{
    --pf-mobile-top-row-h:52px;
    --pf-mobile-table-head-top:0px;
    --pf-mobile-scroll-area-h:calc(100dvh - var(--pf-mobile-top-row-h));
    --pf-mobile-table-head-h:38px;
  }

  html,
  body{
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-x pan-y !important;
  }

  html{
    scroll-padding-top:0 !important;
  }

  #main-container{
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    background:transparent !important;
    display:flex !important;
    flex-direction:column !important;
  }

  #container{
    flex:1 1 auto !important;
    width:100% !important;
    /* Kapsayıcı yüksekliği, hero kartların altındaki gerçek üst ofset + sabit (floating)
       alt navigasyonun gerçek ayak izi düşülerek JS'te ölçülür (--pf-mobile-container-h)
       → kapsayıcı tam [üst ofset, nav üstü] aralığına oturar; tablo + sayfalama nav'ın
       ÜSTÜNDE kalır. JS çalışana dek 100dvh - alt nav payı ile güvenli yedek. */
    height:var(--pf-mobile-container-h, calc(100dvh - var(--pf-mobile-bottom-nav-h, var(--pf-mobile-bar-height, 76px)))) !important;
    min-height:0 !important;
    max-height:var(--pf-mobile-container-h, calc(100dvh - var(--pf-mobile-bottom-nav-h, var(--pf-mobile-bar-height, 76px)))) !important;
    padding:0 var(--pf-shell-x, 8px) 0 !important;
    margin:0 auto !important;
    gap:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  /* ÜST ROW: artık sayfayla kaymıyor; flex layout içinde ayrı, sabit katman */
  #top-row{
    position:relative !important;
    top:auto !important;
    flex:0 0 var(--pf-mobile-top-row-h) !important;
    z-index:2140 !important;

    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 42px !important;
    grid-template-rows:40px !important;
    align-items:center !important;
    column-gap:7px !important;
    row-gap:0 !important;

    width:100% !important;
    min-width:0 !important;
    height:var(--pf-mobile-top-row-h) !important;
    min-height:var(--pf-mobile-top-row-h) !important;
    max-height:var(--pf-mobile-top-row-h) !important;
    margin:0 !important;
    /* Sağ/sol padding 5px artırıldı (6px → 11px) — tablo kenar paydaşlığıyla uyumlu. */
    padding:6px 11px !important;

    border-top:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--text-color) 7%, transparent) !important;
    border-radius:0 !important;

    background:linear-gradient(
      180deg,
      color-mix(in srgb, var(--card-bg) 88%, transparent),
      color-mix(in srgb, var(--card-bg) 68%, var(--bg-color) 32%)
    ) !important;

    box-shadow:none !important;
    overflow:hidden !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  #top-row.controls-open{
    z-index:2141 !important;
  }

  #tabs-container{
    grid-column:1 !important;
    grid-row:1 !important;
    display:block !important;
    align-self:center !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    margin:0 !important;
    padding:0 !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  #tabs-container::-webkit-scrollbar{
    display:none !important;
  }

  #tabs{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    width:max-content !important;
    min-width:max-content !important;
    height:40px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    white-space:nowrap !important;
    visibility:visible !important;
  }

  #tabs .tab,
  #tabs span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    min-width:96px !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 2px 1px !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    border-radius:0 !important;
    background:transparent !important;
    color:color-mix(in srgb, var(--text-color) 74%, var(--subtext-color) 14%) !important;
    box-shadow:none !important;
    font-size:12.6px !important;
    font-weight:570!important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    text-decoration:none !important;
    user-select:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #tabs .tab.active,
  #tabs span.active{
    color:var(--text-color) !important;
    background:transparent !important;
    border-bottom-color:var(--accent-color) !important;
  }

  #tabs .tab:hover,
  #tabs span:hover{
    transform:none !important;
    opacity:1 !important;
    background:transparent !important;
    border-bottom-color:color-mix(in srgb, var(--accent-color) 38%, transparent) !important;
  }

  #tabs .pf-dyn-tab{
    flex:0 0 auto !important;
    min-width:88px !important;
    max-width:160px !important;
    padding:0 6px 1px !important;
    opacity:.96 !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    color:color-mix(in srgb, var(--text-color) 84%, transparent) !important;
  }

  #tabs .pf-dyn-tab.active{
    color:var(--text-color) !important;
    background:transparent !important;
    border-bottom-color:var(--accent-color) !important;
  }

  /* Mobilde overflow toggle ve dropdown menü kapalı */
  #tabs #pf-dyn-more-toggle{ display:none !important; }

  #pf-dyn-overflow-menu,
  #pf-dyn-overflow-menu.is-open{
    display:none !important;
  }

  /* Sağ sabit arama/filtre butonu */
  #mobile-controls-toggle.mobile-controls-toggle{
    grid-column:2 !important;
    grid-row:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;

    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 !important;

    border-radius:0 !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    background:transparent !important;
    color:var(--text-color) !important;
    box-shadow:none !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #mobile-controls-toggle.mobile-controls-toggle svg{
    width:19px !important;
    height:19px !important;
    display:block !important;
    pointer-events:none !important;
  }

  #mobile-controls-toggle.mobile-controls-toggle[aria-expanded="true"]{
    background:transparent !important;
    color:var(--negative-color, #ef4444) !important;
    border-bottom-color:var(--negative-color, #ef4444) !important;
  }

  #top-row.controls-open #tabs-container{
    opacity:0 !important;
    transform:translateX(-8px) !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }

  /* Açılır kontrol alanı */
  #right-top-controls{
    grid-column:1 !important;
    grid-row:1 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    align-self:center !important;
    gap:6px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:40px !important;
    max-height:40px !important;

    opacity:0 !important;
    transform:translateX(8px) !important;
    pointer-events:none !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    scrollbar-width:none !important;
    transition:opacity .16s ease, transform .16s ease !important;
  }

  #right-top-controls::-webkit-scrollbar{
    display:none !important;
  }

  #right-top-controls.is-open{
    opacity:1 !important;
    transform:translateX(0) !important;
    pointer-events:auto !important;
  }

  #right-top-controls > *{
    min-width:0 !important;
  }

  #selected-filter-ui.selected-ui{
    display:none !important;
  }

  #search-container{
    order:0 !important;
    flex:1 1 auto !important;
    display:none;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    min-width:104px !important;
    max-width:none !important;
    height:40px !important;
    margin:0 !important;
    position:relative !important;
  }

  #right-top-controls.is-open #search-container[style*="block"]{
    display:flex !important;
  }

  #search-input{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    line-height:38px !important;
    padding:0 34px 0 2px !important;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--text-color) 14%, transparent) !important;
    background:transparent !important;
    color:var(--text-color) !important;
    font-size:16px !important;
    font-weight:500!important;
    box-shadow:none !important;
    transform:none !important;
  }

  #search-input::placeholder{
    color:color-mix(in srgb, var(--subtext-color) 78%, transparent) !important;
  }

  .clear-icon{
    right:5px !important;
    top:50% !important;
    width:28px !important;
    height:28px !important;
    transform:translateY(-50%) !important;
  }

  .clear-icon:active{
    transform:translateY(-50%) scale(.96) !important;
  }

  #right-top-controls button,
  #right-top-controls select{
    order:10 !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:54px !important;
    max-width:76px !important;
    height:38px !important;
    padding:0 2px 5px !important;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--text-color) 14%, transparent) !important;
    background:transparent !important;
    color:color-mix(in srgb, var(--text-color) 88%, var(--subtext-color) 12%) !important;
    box-shadow:none !important;
    font-size:11.8px !important;
    font-weight:580!important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    cursor:pointer !important;
  }

  #right-top-controls button:active,
  #right-top-controls select:active{
    transform:scale(.98) !important;
  }

  #open-crypto-filter-button{
    min-width:58px !important;
    max-width:68px !important;
  }

  #open-crypto-columns-button{
    min-width:62px !important;
    max-width:76px !important;
  }

  #timeframe-dropdown{
    min-width:72px !important;
    max-width:84px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    padding-right:22px !important;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position:
      calc(100% - 14px) 16px,
      calc(100% - 9px) 16px !important;
    background-size:5px 5px, 5px 5px !important;
    background-repeat:no-repeat !important;
  }

  #open-lists-options-button,
  #open-favorites-options-button{
    min-width:58px !important;
    max-width:76px !important;
  }

  #open-market-filter-button{
    min-width:62px !important;
    max-width:74px !important;
  }

  /* JS'nin gizlediği başlıkları mobilde geri görünür tutar */
  #tab-headers,
  .tab-headers,
  #section-headings,
  .section-headings,
  #category-tabs .headers,
  .category-tabs-header,
  .tabs-header,
  #tabs-header{
    display:flex !important;
    visibility:visible !important;
  }

  #tab-headers.visually-hidden,
  .tab-headers.visually-hidden,
  #section-headings.visually-hidden,
  .section-headings.visually-hidden,
  #category-tabs .headers.visually-hidden,
  .category-tabs-header.visually-hidden,
  .tabs-header.visually-hidden,
  #tabs-header.visually-hidden{
    position:static !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:inherit !important;
    overflow:visible !important;
    clip:auto !important;
    white-space:normal !important;
  }

  /* Aktif olmayan sekmeler yer kaplamasın */
  .tab-content{
    min-height:0 !important;
    margin-top:0 !important;
    transition:none !important;
  }

  .tab-content:not(.active){
    display:none !important;
  }

  /*
    ANA DÜZELTME:
    Dikey scroll artık sayfada değil, aktif table-wrapper içinde.
    Top-row üstte ayrı durur; table başlığı wrapper içinde top:0 ile sabit kalır.
  */
  #crypto-content.table-wrapper,
  #categories-content.table-wrapper,
  #category-content.table-wrapper,
  #market-data-content.table-wrapper{
    flex:1 1 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:var(--pf-mobile-scroll-area-h) !important;
    max-height:var(--pf-mobile-scroll-area-h) !important;
    margin:0 !important;
    padding-top:0 !important;

    overflow-x:auto !important;
    overflow-y:auto !important;
    /* x: rubber-band kaldırıldı (en solda boşluk görünmesin)
       y: pull-to-refresh kendi animasyonunu yönetir */
    overscroll-behavior-x:none !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;

    position:relative !important;
    z-index:1 !important;
    isolation:isolate !important;
    border-radius:0 !important;
    background:transparent !important;
    transform:none !important;
  }

  /*
    Crypto sekmesinde sayfa butonları ayrıca altta durduğu için
    70px mobil alt boşluk pagination alanına verilir.
  */
  #crypto-content.table-wrapper{
    padding-bottom:calc(12px + var(--pf-safe-bottom, 0px)) !important;
  }

  /*
    Pagination olmayan mobil sekmelerde son içerik sticky alt nav altında kalmasın.
  */
  #categories-content.table-wrapper,
  #category-content.table-wrapper,
  #market-data-content.table-wrapper{
    padding-bottom:calc(12px + var(--pf-mobile-bottom-safe-space, 70px)) !important;
  }

  #crypto-content.table-wrapper.active,
  #categories-content.table-wrapper.active,
  #category-content.table-wrapper.active,
  #market-data-content.table-wrapper.active{
    display:block !important;
  }

  #crypto-table,
  #category-table,
  #favorites-table,
  #market-data-table{
    border-collapse:separate !important;
    border-spacing:0 !important;
  }

  #crypto-table thead,
  #category-table thead,
  #favorites-table thead,
  #market-data-table thead{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    transform:none !important;
    -webkit-transform:none !important;
  }

  #crypto-table thead th,
  #category-table thead th,
  #favorites-table thead th,
  #market-data-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:2060 !important;
    height:var(--pf-mobile-table-head-h) !important;
    padding:6px 2px !important;
    font-size:10.75px !important;
    font-weight:540!important;
    line-height:1.06 !important;
    background:var(--pf-table-head-bg) !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  #crypto-table thead th.col-coin{
    top:0 !important;
    z-index:2100 !important;
    background:var(--pf-sticky-coin-head-bg, var(--pf-table-head-bg)) !important;
  }

  #category-table thead th.cat-col1{
    top:0 !important;
    z-index:2100 !important;
    background:var(--pf-table-head-bg) !important;
  }

  #crypto-table tbody td,
  #category-table tbody td,
  #favorites-table tbody td,
  #market-data-table tbody td{
    padding-left:2px !important;
    padding-right:2px !important;
  }

  #crypto-table tbody td.col-coin,
  #category-table tbody td.cat-col1{
    z-index:80 !important;
  }

  #crypto-table tbody td.col-coin{
    background:var(--pf-current-coin-sticky-bg, var(--pf-sticky-coin-row-bg, var(--pf-table-row-base))) !important;
  }

  #crypto-table tbody tr:nth-child(even) > td.col-coin{
    background:var(--pf-current-coin-sticky-bg, var(--pf-sticky-coin-row-bg-alt, var(--pf-table-row-alt))) !important;
  }

  #crypto-pagination.crypto-pagination{
    display:none !important;
    flex:0 0 auto !important;
    border-top:1px solid var(--pf-surface-line) !important;
    margin:0 !important;

    /*
      Mobilde sayfa butonları sürekli görünmez; liste sonuna gelindiğinde açılır.
      Sayfalamanın nav altında kalma sorunu artık #container yüksekliğinin gerçek
      alt-nav payı kadar kısaltılmasıyla (--pf-mobile-bottom-nav-h) yapısal olarak
      çözülüyor; bu yüzden buradaki alt boşluk yalnızca küçük bir nefes payıdır.
    */
    padding:5px 2px calc(12px + var(--pf-safe-bottom, 0px)) !important;

    max-height:none !important;
    overflow:visible !important;
    background:var(--bg-color) !important;
    z-index:20 !important;
  }

  #container.pf-mobile-pagination-at-end #crypto-content.active + #crypto-pagination.crypto-pagination{
    display:flex !important;
    /* Sert "pop" yerine yumuşak belirme: hafif fade + aşağıdan kayma. */
    animation:pfPagIn .24s cubic-bezier(.22,.8,.28,1) both;
  }
  @keyframes pfPagIn{
    from{ opacity:0; transform:translateY(6px); }
    to  { opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    #container.pf-mobile-pagination-at-end #crypto-content.active + #crypto-pagination.crypto-pagination{
      animation:none !important;
    }
  }

  #crypto-pagination.crypto-pagination .crypto-page-actions{
    padding-bottom:0 !important;
  }

  #pf-dyn-overflow-menu,
  .global-tooltip,
  #global-score-tooltip{
    z-index:2147483200 !important;
  }

  /* =========================================================================
     PULL-TO-REFRESH — yalnız ilk tab (#crypto-content) + mobil
     Modern tasarım: sticky başlık altında beliren cam disk + dairesel ilerleme
     halkası. Yenileme sırasında tablo gövdesi ayrı bir katmanla (blur+karartma)
     örtülür. Tüm durumlar opacity/visibility ile yönetilir → gesture yarıda
     bırakılınca ekranda kalıntı/sabit imaj KALMAZ.
     ========================================================================= */
  /* ═══════════ MOBİL AŞAĞI-ÇEK YENİLEME (modern) ═══════════
     Blur YOK: yenileme sırasında tablo OPAK bir katmanla tamamen gizlenir,
     ortada yükleniyor animasyonu döner, bitince katman kalkıp tablo geri gelir. */
  #pf-ptr-backdrop{
    position:fixed;
    left:0; right:0;
    top:var(--pf-ptr-top, var(--pf-mobile-top-row-h, 52px));
    height:0;
    z-index:2040;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:var(--bg-color, var(--card-bg, #ffffff)); /* tam opak → tabloyu gizler */
    transition:opacity .26s ease, visibility 0s linear .26s;
  }
  #pf-ptr-backdrop.is-on{
    opacity:1;
    visibility:visible;
    transition:opacity .2s ease, visibility 0s;
  }

  #pf-ptr-indicator{
    position:fixed;
    left:0; right:0;
    top:var(--pf-ptr-top, var(--pf-mobile-top-row-h, 52px));
    z-index:2051;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease, visibility 0s linear .24s;
  }
  #pf-ptr-indicator.is-active{
    opacity:1;
    visibility:visible;
    transition:opacity .24s ease, visibility 0s;
  }

  #pf-ptr-indicator .pf-ptr-disc{
    margin-top:14px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:color-mix(in srgb, var(--card-bg, #fff) 92%, transparent);
    box-shadow:
      0 12px 30px -12px rgba(0,0,0,.5),
      0 2px 6px -2px rgba(0,0,0,.16),
      0 0 0 1px color-mix(in srgb, var(--text-color) 9%, transparent);
    transform:
      translateY(calc(-18px + var(--pf-ptr-pull, 0px) * 0.16))
      scale(calc(.6 + .4 * var(--pf-ptr-prog, 0)));
    transition:transform .3s cubic-bezier(.22,.9,.26,1), box-shadow .24s ease, background .24s ease;
    will-change:transform;
  }
  /* Pull sırasında disk parmağı anlık izlesin (transform geçişsiz). */
  #pf-ptr-indicator.is-pulling .pf-ptr-disc{
    transition:box-shadow .2s ease, background .2s ease;
  }

  #pf-ptr-indicator .pf-ptr-ring{
    width:26px;
    height:26px;
    transform:rotate(-90deg);
    transform-origin:50% 50%;
  }
  #pf-ptr-indicator .pf-ptr-ring-track{
    fill:none;
    stroke:color-mix(in srgb, var(--text-color) 13%, transparent);
    stroke-width:3.2;
  }
  #pf-ptr-indicator .pf-ptr-ring-prog{
    fill:none;
    stroke:var(--accent-color, #3b82f6);
    stroke-width:3.2;
    stroke-linecap:round;
    stroke-dasharray:100.53;
    stroke-dashoffset:calc(100.53 * (1 - var(--pf-ptr-prog, 0)));
    transition:stroke-dashoffset .12s linear, stroke .2s ease;
  }

  /* Eşik aşıldı → accent tint + yumuşak parıltı + halka nabzı. */
  #pf-ptr-indicator.is-ready .pf-ptr-disc{
    background:color-mix(in srgb, var(--accent-color) 12%, var(--card-bg, #fff));
    box-shadow:
      0 14px 32px -12px color-mix(in srgb, var(--accent-color) 60%, rgba(0,0,0,.4)),
      0 0 0 1px color-mix(in srgb, var(--accent-color) 42%, transparent),
      0 0 20px -2px color-mix(in srgb, var(--accent-color) 45%, transparent);
  }
  #pf-ptr-indicator.is-ready .pf-ptr-ring-prog{
    animation:pf-ptr-ready-pulse 1.1s ease-in-out infinite;
  }
  @keyframes pf-ptr-ready-pulse{
    0%,100%{ opacity:1; } 50%{ opacity:.5; }
  }

  /* Cooldown → halka nötr/soluk (yenileme tetiklenmez). */
  #pf-ptr-indicator.is-cooldown .pf-ptr-ring-prog{
    stroke:color-mix(in srgb, var(--text-color) 30%, transparent);
    animation:none;
  }

  /* Yenileme → disk sabit, halka akıcı 270° yay olarak döner (eased). */
  #pf-ptr-indicator.is-refreshing .pf-ptr-disc{
    transform:translateY(10px) scale(1);
    background:color-mix(in srgb, var(--accent-color) 10%, var(--card-bg, #fff));
  }
  #pf-ptr-indicator.is-refreshing .pf-ptr-ring{
    animation:pf-ptr-rot .9s cubic-bezier(.5,.15,.5,.85) infinite;
  }
  #pf-ptr-indicator.is-refreshing .pf-ptr-ring-prog{
    stroke:var(--accent-color, #3b82f6);
    stroke-dasharray:75 100.53;   /* ~270° yay */
    stroke-dashoffset:0;
    transition:none;
    animation:none;
  }
  @keyframes pf-ptr-rot{
    from{ transform:rotate(0deg); }
    to  { transform:rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce){
    #pf-ptr-indicator .pf-ptr-disc,
    #pf-ptr-indicator.is-refreshing .pf-ptr-ring{ animation:none !important; transition:opacity .2s ease !important; }
  }

  /* Eski metin düğümü (varsa) gizli kalsın. */
  #pf-ptr-indicator .pf-ptr-text{ display:none !important; }
}


@media (max-width:380px){
  #right-top-controls{
    gap:5px !important;
  }

  #search-container{
    min-width:92px !important;
  }

  #search-input{
    font-size:14px !important;
    padding-left:10px !important;
    padding-right:30px !important;
  }

  #right-top-controls button,
  #right-top-controls select{
    min-width:50px !important;
    max-width:64px !important;
    padding-inline:7px !important;
    font-size:11.2px !important;
  }

  #open-crypto-columns-button{
    max-width:68px !important;
  }

  #timeframe-dropdown{
    min-width:68px !important;
    max-width:74px !important;
  }
}

/* =============================================================================
   UNIFIED MODAL — masaüstü merkez overlay + mobil alttan açılır çekmece
   Tüm .modal > .modern-modal yapıları için tek katman. JS taraflı
   pf-unified-modals observer, modal.style.display ile .pf-modal-open
   class'ını senkronlar; bu sayede animasyon ve scroll-lock çalışır.
============================================================================= */

.modal{
  position:fixed !important;
  inset:0 !important;
  display:none;
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
  background: rgba(3, 7, 18, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}

/* JS inline display:flex VE/VEYA .pf-modal-open class'ı modal'ı açar */
.modal[style*="display: flex"],
.modal[style*="display:flex"],
.modal.pf-modal-open{
  display:flex !important;
  animation: pf-modal-backdrop-in .18s ease-out;
}

@keyframes pf-modal-backdrop-in{
  from{ opacity:0; }
  to  { opacity:1; }
}

.modal .modern-modal{
  position:relative;
  width: min(640px, 100%);
  max-height: min(90dvh, calc(100dvh - 40px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.30);
  animation: pf-modal-pop-in .18s cubic-bezier(.22, 1, .36, 1);
  transform-origin: 50% 50%;
}

/* Sadece opacity + minik scale; translateY kullanmıyoruz — modal flex
   tarafından zaten merkeze hizalanmış olduğundan ek bir translate başka
   bir transform kuralıyla çakışıp "kenardan ortaya kayma" görsel
   bug'ına sebep oluyordu. */
@keyframes pf-modal-pop-in{
  from{ opacity:0; transform: scale(.96); }
  to  { opacity:1; transform: scale(1); }
}

.modal .modal-header{
  flex:0 0 auto;
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding: 12px 56px 12px 18px;
  box-sizing:border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  background: var(--card-bg);
}

.modal .modal-header h2,
.modal .modal-header h3{
  margin:0;
  min-width:0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text-color);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
}

.modal .close-modal{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  font-size:0;
  line-height:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition: background .14s ease, color .14s ease;
}

.modal .close-modal::before,
.modal .close-modal::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1.8px;
  border-radius:999px;
  background: currentColor;
  pointer-events:none;
}

.modal .close-modal::before{ transform: translate(-50%, -50%) rotate(45deg); }
.modal .close-modal::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (hover:hover){
  .modal .close-modal:hover{
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-color);
  }
}

.modal .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding: 14px 18px;
  box-sizing:border-box;
}

.modal .modal-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  background: var(--card-bg);
}

/* Modal-footer butonları: kompakt modern pill. finalize'taki underline-link
   stilini bu seçici daha yüksek özgünlükle ezer. */
.modal .modal-footer button,
.modal .modal-footer .btn-secondary,
.modal .modal-footer .btn-danger{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  height: auto !important;
  padding: 0 12px !important;
  border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent) !important;
  border-bottom-width: 1px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-color) !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .10s ease;
}

.modal .modal-footer button:hover{
  background: color-mix(in srgb, var(--text-color) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--text-color) 22%, transparent) !important;
}

.modal .modal-footer button:active{ transform: translateY(1px); }

/* Birincil aksiyon (en sağ ya da [type=submit]) — accent dolgulu */
.modal .modal-footer > button:last-of-type:not(.btn-danger):not(.btn-secondary),
.modal .modal-footer button[type="submit"]{
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
  font-weight: 620 !important;
}

.modal .modal-footer > button:last-of-type:not(.btn-danger):not(.btn-secondary):hover,
.modal .modal-footer button[type="submit"]:hover{
  background: color-mix(in srgb, var(--accent-color) 90%, #000) !important;
  border-color: color-mix(in srgb, var(--accent-color) 90%, #000) !important;
}

.modal .modal-footer button.btn-danger{
  color: var(--negative-color) !important;
  border-color: color-mix(in srgb, var(--negative-color) 28%, transparent) !important;
}

.modal .modal-footer button.btn-danger:hover{
  background: color-mix(in srgb, var(--negative-color) 10%, transparent) !important;
  border-color: var(--negative-color) !important;
}

/* Market Data quick group toggle butonları — daha küçük chip, save'in solunda */
.modal .modal-footer .md-quick-toggles{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: auto;       /* save'i sağa iter */
  min-width: 0;
}

.modal .modal-footer .md-quick-toggles button{
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 540 !important;
  border-radius: 999px !important;
}

.modal .modal-footer .md-quick-toggles button[aria-pressed="true"]{
  background: color-mix(in srgb, var(--accent-color) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent-color) 42%, transparent) !important;
  color: var(--accent-color) !important;
}

.modal .modal-footer .md-quick-toggles button[aria-pressed="true"]:hover{
  background: color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
}

/* remove-confirm modal'ın özel buton satırı (modal-footer yok) */
.modal .remove-btn-row{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  background: var(--card-bg);
}

/* Drag affordance — JS ile her .modern-modal'a enjekte edilir */
.modal .pf-sheet-grabber{
  display:none;
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:4px;
  border-radius:999px;
  background: color-mix(in srgb, var(--text-color) 22%, transparent);
  pointer-events:none;
  z-index:5;
}

/* ── MOBİL: alttan açılır çekmece ─────────────────────────────────────
   crypto-filter-modal'da @media (max-width:860px) per-modal kuralı
   modal'ı tam ekran yapıyordu; bu noktada bizim kuralımız (max-width:860)
   onu da bottom-sheet'e çevirir.
   Sheet, sayfanın altındaki mobil navigation bar'ın ÜSTÜNDE durur —
   .modal'ın padding-bottom'u --pf-mobile-bar-height kadar rezerv eder. */
@media (max-width: 860px){
  .modal{
    padding: 0 0 var(--pf-mobile-bar-height, 76px) 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .modal .modern-modal{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(92dvh - var(--pf-mobile-bar-height, 76px)) !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    border-right: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.30) !important;
    animation: pf-sheet-slide-up .24s cubic-bezier(.22, 1, .36, 1) !important;
    transform-origin: bottom center !important;
  }

  @keyframes pf-sheet-slide-up{
    from{ opacity:0; transform: translateY(28px); }
    to  { opacity:1; transform: translateY(0); }
  }

  .modal .pf-sheet-grabber{ display:block !important; }

  .modal .modal-header{
    padding: 20px 52px 12px 16px !important;
    min-height: 54px !important;
  }

  .modal .modal-header h2,
  .modal .modal-header h3{ font-size: 15px !important; }

  .modal .close-modal{
    top: 18px !important;
    transform: none !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .modal .modal-body{
    padding: 12px 14px !important;
  }

  .modal .modal-footer,
  .modal .remove-btn-row{
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* Modal açıkken arka plan scroll lock */
body.pf-modal-locked{
  overflow:hidden !important;
}

/* =============================================================================
   MD REF COINS — filter modal'daki referans coin seçici (chip-style)
============================================================================= */
.md-ref-coins-row{
  /* Modal body bir CSS grid (grid-checklist) — bu satır tüm sütunları
     kaplasın ki chip'ler dar bir grid hücresinde sıkışmasın. */
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:6px 2px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  margin-bottom:4px;
  width:100%;
}

.md-ref-coins-title{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  text-transform:uppercase;
}

.md-ref-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

/* Toggle chip — basit, sade, dashboard temasıyla uyumlu */
.md-ref-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 12px;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  border-radius:999px;
  background:transparent;
  color: color-mix(in srgb, var(--text-color) 72%, transparent);
  font-size:12.5px;
  font-weight:580;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .10s ease;
}

@media (hover:hover){
  .md-ref-chip:hover{
    color: var(--text-color);
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 22%, transparent);
  }
}

.md-ref-chip:active{ transform: translateY(1px); }

.md-ref-chip[aria-pressed="true"]{
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
}

@media (hover:hover){
  .md-ref-chip[aria-pressed="true"]:hover{
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    border-color: var(--accent-color);
  }
}

.md-ref-chip:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent-color) 70%, white);
  outline-offset:2px;
}

/* Özel coin — chip görünümlü input */
.md-ref-chip.md-ref-chip--input{
  width:96px;
  padding:0 10px;
  text-align:center;
  outline:none;
  text-transform:uppercase;
  cursor:text;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
}

.md-ref-chip.md-ref-chip--input::placeholder{
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
  letter-spacing:.02em;
  font-weight:540;
  text-transform:none;
}

.md-ref-chip.md-ref-chip--input:hover{
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
  border-color: color-mix(in srgb, var(--text-color) 22%, transparent);
}

.md-ref-chip.md-ref-chip--input:focus,
.md-ref-chip.md-ref-chip--input.is-filled{
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
}

/* =============================================================================
   MARKET-DATA FILTER MODAL — mobil özel cila
   - Header sade, grid 2 kolon ama sıkı
   - Quick toggle chip'leri saven'in solunda alta gerekirse kaydırılarak yer
   - Referans coin row tam genişlik, header altında temiz bir bant
============================================================================= */
@media (max-width: 768px){
  #market-data-filter-modal .modal-header{
    padding: 18px 50px 10px 14px !important;
    min-height: 50px !important;
  }

  #market-data-filter-modal .modal-body{
    padding: 8px 12px 10px !important;
  }

  #market-data-filter-modal #market-data-filter-items.grid-checklist{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #market-data-filter-modal .grid-checklist label{
    min-height: auto !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  /* Referans coin chip row — header altında uzun bir bant, sıkı */
  #market-data-filter-modal .md-ref-coins-row{
    padding: 2px 0 8px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }

  #market-data-filter-modal .md-ref-coins-title{
    font-size: 10.5px !important;
  }

  #market-data-filter-modal .md-ref-chips{
    gap: 5px !important;
  }

  #market-data-filter-modal .md-ref-chip{
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    letter-spacing: .03em !important;
  }

  #market-data-filter-modal .md-ref-chip.md-ref-chip--input{
    width: 84px !important;
  }

  /* Footer'da Kaydet + Hızlı grup chip'leri — Kaydet sağda sabit, grupları
     sola yumuşak akıt; gerekirse alta kayar */
  #market-data-filter-modal .modal-footer{
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #market-data-filter-modal .modal-footer .md-quick-toggles{
    gap: 5px !important;
    flex: 1 1 auto !important;
    margin-right: 6px !important;
  }

  #market-data-filter-modal .modal-footer .md-quick-toggles button{
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  #market-data-filter-modal #market-data-filter-save{
    flex: 0 0 auto !important;
    min-width: 80px !important;
  }
}

@media (max-width: 380px){
  #market-data-filter-modal #market-data-filter-items.grid-checklist{
    grid-template-columns: 1fr !important;
  }

  #market-data-filter-modal .md-ref-chip.md-ref-chip--input{
    width: 72px !important;
  }
}

/* ==== from <style> block 3 (orig lines 17128-17400) <style id="pf-mobile-tabbar-redesign"> ==== */
/* Açılır menü: body'e eklenir, viewport'a sabitlenir (global overlay).
   display tamamen .is-open class'ı ile yönetilir; !important ile include
   bağlamındaki (index.php) global kuralların ezmesi engellenir. */
#pf-mtab-menu{
  position:fixed !important;
  z-index:2147483600 !important;
  display:none !important;
  left:0;
  top:0;
  margin:0 !important;
  min-width:170px;
  max-width:80vw;
  max-height:62vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--card-bg, #fff);
  border:1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
  padding:6px;
}
#pf-mtab-menu.is-open{ display:block !important; }
#pf-mtab-menu .pf-mtab-option{
  display:block;
  width:100%;
  text-align:left;
  padding:11px 12px;
  border:0;
  background:transparent;
  color:var(--text-color);
  font-size:14px;
  font-weight:560;
  line-height:1.2;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#pf-mtab-menu .pf-mtab-option:hover,
#pf-mtab-menu .pf-mtab-option.active{
  background:color-mix(in srgb, var(--accent-color) 14%, transparent);
  color:var(--text-color);
}

@media (max-width:700px){
  /* Üst row: sekmeler (auto) + kontroller (1fr) yan yana; mercek kolonu yok */
  #top-row{
    grid-template-columns:auto minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  /* Sekme kabı içeriğe göre daralır; yatay scroll'a gerek yok */
  #top-row #tabs-container{
    grid-column:1 !important;
    width:auto !important;
    max-width:none !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  #tabs{
    width:auto !important;
    min-width:0 !important;
    gap:4px !important;
    padding:0 !important;
  }

  /* Coinler ile dropdown dışındaki tüm sekmeler gizli (statik + dinamik) */
  #tabs > .tab:not(#crypto-tab):not(#pf-mtab-toggle){ display:none !important; }
  #tabs > #pf-dyn-more-toggle{ display:none !important; }

  /* Coinler kompakt */
  #tabs #crypto-tab{
    min-width:auto !important;
    padding:0 4px 1px !important;
  }

  /* Dropdown tetikleyici */
  #tabs #pf-mtab-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    flex:0 0 auto !important;
    min-width:auto !important;
    /* Sağdaki butonlar artık ikon olduğundan tam sekme adına yer var; üst sınır
       yalnızca uçtaki çok uzun adlarda devreye girer (≤359px'de daha dar). */
    max-width:140px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 4px 1px !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    background:transparent !important;
    color:color-mix(in srgb, var(--text-color) 74%, var(--subtext-color) 14%) !important;
    font-size:12.6px !important;
    font-weight:570 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  #tabs #pf-mtab-toggle .pf-mtab-label{
    /* #tabs span{min-width:96px} kuralının bu iç etikete sızmasını ez:
       "Diğer" içeriğe göre daralsın, sağ kontrollere yer açılsın. Uzun
       sekme adları toggle'ın max-width'i + ellipsis ile zaten kesilir. */
    min-width:0 !important;
    flex:0 1 auto !important;
    /* block: #tabs span{justify-content:center} flex-merkezlemesini iptal et,
       yoksa metin ortadan kırpılır ve ellipsis çalışmaz ("ontent Creati"). */
    display:block !important;
    text-align:center !important;
    /* #tabs span{height:38px} etiketi 38px yükseltiyor; line-height ile metni
       dikey ortala (yoksa üstten başlar). */
    line-height:38px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  /* Caret: etiketin hemen yanında, güvenilir SVG chevron */
  #tabs #pf-mtab-toggle .pf-mtab-caret{
    flex:0 0 auto !important;
    width:10px !important;
    height:7px !important;
    margin-left:0 !important;
    opacity:.7 !important;
    color:inherit !important;
    transition:transform .15s ease !important;
  }
  #tabs #pf-mtab-toggle.pf-open .pf-mtab-caret{ transform:rotate(180deg) !important; }
  #tabs #pf-mtab-toggle.active{
    color:var(--text-color) !important;
    border-bottom-color:var(--accent-color) !important;
  }

  /* Mercek kaldırıldı */
  #top-row #mobile-controls-toggle.mobile-controls-toggle{ display:none !important; }

  /* Sağ kontroller her zaman görünür, 2. kolonda. Tamamen sade: zemin/çip
     yok; sekmelerle aynı minimal alt-çizgi dili. */
  #top-row #right-top-controls{
    grid-column:2 !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    visibility:visible !important;
    gap:10px !important;
  }

  /* Coin arama kutusu tüm sekmelerde görünür — sola hizalı, alt çizgili */
  #top-row #search-container{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    align-self:center !important;
    flex:1 1 auto !important;
    /* Geniş (Coinler) durumda flex-grow ile zaten büyür; bu alt sınır yalnızca
       uzun sekme adı aktifken sıkışan alanda devreye girer, Sütunlar taşmasın. */
    min-width:72px !important;
    height:38px !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    position:relative !important;
  }
  #top-row #search-input{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:38px !important;
    line-height:38px !important;
    padding:0 24px 1px 2px !important;
    border:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--text-color) 16%, transparent) !important;
    background:transparent !important;
    font-size:16px !important;
    font-weight:500 !important;
  }
  #top-row #search-input:focus{
    border-bottom-color:color-mix(in srgb, var(--accent-color) 60%, transparent) !important;
  }
  /* "Coin ara" placeholder: sekme yazısı boyut/font/ağırlığında, ama placeholder
     olduğu için tab metninden biraz daha soluk (opaklık ayarı). */
  #top-row #search-input::placeholder{
    font-size:12.6px !important;
    font-weight:570 !important;
    color:color-mix(in srgb, var(--text-color) 55%, transparent) !important;
    opacity:1 !important;
  }
  #top-row #search-container .clear-icon{
    right:2px !important;
  }

  /* Filtre/Sütun/Liste vb. butonlar: zeminsiz, sade alt çizgili metin */
  #top-row #right-top-controls button,
  #top-row #right-top-controls select{
    height:38px !important;
    min-width:auto !important;
    padding:0 1px 4px !important;
    border:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--text-color) 16%, transparent) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:color-mix(in srgb, var(--text-color) 80%, var(--subtext-color) 20%) !important;
    font-size:12px !important;
    font-weight:560 !important;
  }
  #top-row #right-top-controls button:active,
  #top-row #right-top-controls select:active{
    transform:none !important;
    border-bottom-color:color-mix(in srgb, var(--accent-color) 50%, transparent) !important;
  }

  /* ── İKON BUTONLAR (arama kutusunun sağı): Filtrele + Sütunlar + Market Filtrele ──
     Mobilde metin yerine ikon; genişlikten kazanıp tam sekme adına yer açar.
     3-ID seçici, yukarıdaki "button" (2 ID + tip) kuralını özgüllükte ezer.
     ÖNEMLİ: display'i ELLEMEYİZ — görünürlüğü safeDisp() inline block/none ile
     yönetir; !important ile ezersek sekme geçişinde buton gizlenemez (sızar).
     İkon absolute ile ortalandığından butonun display'ine ihtiyaç yok. */
  #top-row #right-top-controls #open-crypto-filter-button .btn-label,
  #top-row #right-top-controls #open-crypto-columns-button .btn-label,
  #top-row #right-top-controls #open-market-filter-button .btn-label,
  #top-row #right-top-controls #open-lists-options-button .btn-label{ display:none !important; }
  #top-row #right-top-controls #open-crypto-filter-button,
  #top-row #right-top-controls #open-crypto-columns-button,
  #top-row #right-top-controls #open-market-filter-button,
  #top-row #right-top-controls #open-lists-options-button{
    width:34px !important;
    min-width:34px !important;
    padding:0 !important;
    border:0 !important;
    border-bottom:0 !important;
    position:relative !important;
    color:color-mix(in srgb, var(--text-color) 66%, var(--subtext-color) 20%) !important;
  }
  #top-row #right-top-controls .pf-btn-icon{
    display:block !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    width:19px !important;
    height:19px !important;
    fill:currentColor !important;
  }
  #top-row #right-top-controls #open-crypto-filter-button:active,
  #top-row #right-top-controls #open-crypto-columns-button:active,
  #top-row #right-top-controls #open-market-filter-button:active,
  #top-row #right-top-controls #open-lists-options-button:active{
    color:var(--accent-color) !important;
  }
  /* aktif filtre sayısı rozeti: ikonun sağ-üst köşesine */
  #top-row #right-top-controls #open-crypto-filter-button .filter-count-badge{
    position:absolute !important;
    top:0 !important;
    right:-2px !important;
  }

  /* Küçük ekran (mobil): "1 Gün" select'inde OK YOK (kullanıcı isteği).
     3-ID seçici: #top-row #right-top-controls select kuralını ezer. */
  #top-row #right-top-controls #timeframe-dropdown{
    -webkit-appearance:none !important;
    appearance:none !important;
    background-image:none !important;
    padding-right:2px !important;
  }
}

/* ==== from <style> block 4 (orig lines 17404-17436) <style id="pf-mobile-tabbar-narrow"> ==== */
/* İkon butonlar varsayılan (masaüstü) gizli; metin etiket görünür. Mobilde
   redesign bloğundaki #top-row #right-top-controls .pf-btn-icon !important ezer. */
.pf-btn-icon{ display:none; fill:currentColor; }
/* ≤380px: boşlukları kıs (360/375 worst-case'e pay açar). */
@media (max-width:380px){
  #top-row{ column-gap:6px !important; }
  #top-row #right-top-controls{ gap:6px !important; }
}
/* ≤359px (320 sınıfı dar cihazlar): ikonlar yer açtığından toggle 104px'e kadar
   (orta adlar "Market Data"/"Kategoriler" tam görünür; yalnız çok uzun ad kesilir),
   arama alt sınırını da kıs ki her şey tek satıra sığsın. */
@media (max-width:359px){
  #top-row #tabs #pf-mtab-toggle{ max-width:104px !important; }
  #top-row #search-container{ min-width:56px !important; }
}
/* Büyük ekran (≥701px): "1 Gün" select oku = "Diğer" toggle'ının chevron'u ile
   aynı biçim (.pf-mtab-caret SVG path'i). Native ok yerine ince chevron. */
@media (min-width:701px){
  #top-row #right-top-controls #timeframe-dropdown{
    -webkit-appearance:none !important;
    appearance:none !important;
    padding-right:22px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 7px center !important;
    background-size:10px 6px !important;
  }
  body.dark-theme #top-row #right-top-controls #timeframe-dropdown{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aab2c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}

/* ==== from <style> block 5 (orig lines 17438-17629) <style id="pf-table-mode-css"> ==== */
/* ═══════════ BASİT / GELİŞMİŞ TABLO MODU ═══════════
   <html>.pf-simple-mode iken kripto tablosunda yalnızca temel sütunlar görünür.
   Sütun gizleme asıl olarak applyColumnState (inline display) ile yapılır; aşağıdaki
   kurallar erken boyamada (statik <thead>) titremeyi önler. Gelişmiş moda geçilince
   .pf-simple-mode sınıfı kalkar ve kullanıcının kendi sütun tercihleri geri gelir. */
html.pf-simple-mode #crypto-table .col-fv-buy,
html.pf-simple-mode #crypto-table .col-fv-sell,
html.pf-simple-mode #crypto-table .col-pct2,
html.pf-simple-mode #crypto-table .col-pct7,
html.pf-simple-mode #crypto-table .col-pct30,
html.pf-simple-mode #crypto-table .col-pct365,
html.pf-simple-mode #crypto-table .col-vol24,
html.pf-simple-mode #crypto-table .col-infl,
html.pf-simple-mode #crypto-table .col-vm{
  display:none !important;
}

/* Basit modda sütunlar sabit olduğundan "Sütunlar" (sütun ayarları) düğmesi
   anlamsız → gizlenir. Gelişmiş moda dönülünce safeDisp'in inline display'i geri gelir. */
html.pf-simple-mode #open-crypto-columns-button{
  display:none !important;
}

/* ── Basit modda yalnızca "Coinler" sekmesi görünür ──
   Diğer sekmeler + sekme-geçiş düğmeleri (mobil "Diğer ▾", dinamik "daha fazla")
   ve açılır sekme menüleri gizlenir; tek görünen sekme Coinler olur. Arama kutusu
   ve filtre ikonları #right-top-controls içindedir → ETKİLENMEZ (kullanıcı isteği). */
html.pf-simple-mode #tabs > *:not(#crypto-tab):not(#mobile-controls-toggle):not(#pf-quicklist-toggle):not(.pf-ql-tab),
html.pf-simple-mode #pf-mtab-menu,
html.pf-simple-mode #pf-dyn-overflow-menu{
  display:none !important;
}

/* ── MOBİL BASİT GÖRÜNÜM (≤700px): 4 sütun → Puan | Coin | 30g Grafik | Fiyat.
   DOM sırası (score,coin,price,…,spark) DEĞİŞMEDEN "30g Grafik"i Coin ↔ Fiyat
   ARASINA almak için satırlar FLEX yapılır + 'order' ile sıralanır. flex-wrap:nowrap
   → ASLA 2. satıra taşmaz (önceki grid sürümü auto-placement ile 2 satıra düşüyordu).
   Yalnız mobil-basit; gelişmiş/masaüstü tablo etkilenmez. Yükseklik 2 satırlı fiyat
   hücresiyle belirlenir; sparkline 26px sığar → satır YÜKSELMEZ. ── */
@media (max-width:700px){
  html.pf-simple-mode #crypto-content.table-wrapper{
    overflow-x:hidden !important;
  }

  /* tr'leri flex yapabilmek için table/thead/tbody display:block; colgroup blok
     tabloda boş şerit oluşturmasın diye gizlenir (eski "fazladan satır" sebebi). */
  html.pf-simple-mode #crypto-table,
  html.pf-simple-mode #crypto-table thead,
  html.pf-simple-mode #crypto-table tbody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  html.pf-simple-mode #crypto-table{
    transform:none !important;
    -webkit-transform:none !important;
  }
  html.pf-simple-mode #crypto-table colgroup{ display:none !important; }
  html.pf-simple-mode #crypto-table thead tr,
  html.pf-simple-mode #crypto-table tbody tr{
    display:flex !important;
    flex-wrap:nowrap !important;       /* TEK SATIR garantisi */
    align-items:stretch !important;
    width:100% !important;
  }

  /* # / 24s% / M.Cap mobil basitte gizli (24s% fiyatın altında). */
  html.pf-simple-mode #crypto-table .col-index,
  html.pf-simple-mode #crypto-table .col-pct24,
  html.pf-simple-mode #crypto-table .col-mcap{
    display:none !important;
  }

  /* Görünür 4 hücre → 'order' ile görsel sıra Puan(1) | Coin(2) | 30g Grafik(3) |
     Fiyat(4); flex-basis ile genişlik; içerik flex ile dikey ortalanır (hücreler
     satır yüksekliğini doldurur → şerit/sticky arka planlar bozulmaz). col-spark
     global display:none'dan burada kurtarılır (yalnız mobil-basit). */
  html.pf-simple-mode #crypto-table thead th.col-score,
  html.pf-simple-mode #crypto-table tbody td.col-score{
    order:4 !important; flex:0 0 52px !important; width:52px !important; min-width:52px !important; max-width:52px !important;
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
    /* "100" + "Puan/Genel" başlığına yetecek kadar dar; sağda 16px = dikey kaydırma
       çubuğu sayının üzerine binmesin (mobil overlay scrollbar payı). */
    padding-left:4px !important; padding-right:16px !important;
  }
  html.pf-simple-mode #crypto-table thead th.col-coin,
  html.pf-simple-mode #crypto-table tbody td.col-coin{
    order:1 !important; flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important;
    display:flex !important; align-items:center !important; justify-content:flex-start !important;
    /* Coin artık İLK sütun (kimlik) → sol kenardan 13px nefes payı. */
    padding-left:13px !important;
  }
  html.pf-simple-mode #crypto-table thead th.col-spark,
  html.pf-simple-mode #crypto-table tbody td.col-spark{
    order:3 !important; flex:0 0 84px !important; width:84px !important; min-width:84px !important; max-width:84px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  html.pf-simple-mode #crypto-table thead th.col-price,
  html.pf-simple-mode #crypto-table tbody td.col-price{
    order:2 !important; flex:0 0 30% !important; width:30% !important; min-width:0 !important; max-width:30% !important;
    display:flex !important; flex-direction:column !important; align-items:flex-end !important; justify-content:center !important;
    /* Fiyat 2. sütun: coin sembolünün hemen yanında (kimlik+fiyat önce dikkat çeksin). */
    padding-right:8px !important;
  }

  /* Başlık satırı dikeyde sticky — flex modelde THEAD seviyesinde (hücreler statik).
     Aşağı/yukarı kaydırmada Puan/Coin/Grafik/Fiyat başlıkları birlikte sabit kalır. */
  html.pf-simple-mode #crypto-table thead{
    position:sticky !important;
    top:0 !important;
    z-index:2100 !important;
    background:var(--pf-table-head-bg) !important;
  }
  html.pf-simple-mode #crypto-table thead th{
    position:static !important;
    top:auto !important;
    transform:none !important;
    -webkit-transform:none !important;
  }
  /* Yatay-sticky tasarımından gelen transform/contain gövde hücrelerde başlığın
     ÜSTÜNE bindirebiliyordu → basit-mobilde sıfırla. */
  html.pf-simple-mode #crypto-table tbody td.col-score,
  html.pf-simple-mode #crypto-table tbody td.col-coin{
    position:static !important;
    left:auto !important;
    box-shadow:none !important;
    transform:none !important;
    -webkit-transform:none !important;
    contain:none !important;
    z-index:auto !important;
  }

  /* 30g grafik: satır yüksekliğini ARTIRMADAN sığar (sparkline 26px). 76px sütun
     (draw30dSparkline min 72px ister → kırpılmaz). */
  html.pf-simple-mode #crypto-table td.col-spark{
    padding-top:2px !important;
    padding-bottom:2px !important;
    overflow:hidden !important;
  }
  html.pf-simple-mode #crypto-table td.col-spark .sparkline-chart{
    width:100% !important;
    max-width:100% !important;
    height:26px !important;
    margin:0 auto !important;
  }
  /* "30g Grafik" başlığı GÖSTERİLİR (sütun 114px'e genişledi, sığar); alt etiket yok. */
  html.pf-simple-mode #crypto-table thead th.col-spark .th-main{ visibility:visible !important; white-space:nowrap !important; }
  html.pf-simple-mode #crypto-table thead th.col-spark .th-micro,
  html.pf-simple-mode #crypto-table thead th.col-spark .sortico{ visibility:hidden !important; }

  /* "Puan" başlığı + alt "Genel" yazısı görünür. Dar sütunda ok+Genel+kaydırma
     payı birden sığmadığından sıralama OKU GİZLİ; başlık yine tıklanabilir →
     dokununca puana göre sıralar. */
  html.pf-simple-mode #crypto-table thead th.col-score{ pointer-events:auto !important; }
  html.pf-simple-mode #crypto-table thead th.col-score .th-main{ visibility:visible !important; }
  html.pf-simple-mode #crypto-table thead th.col-score .sortico{ display:none !important; }
  html.pf-simple-mode #crypto-table thead th.col-score .th-micro{ display:inline-flex !important; visibility:visible !important; }

  /* Coin hücresi tek satır, taşmasın */
  html.pf-simple-mode #crypto-table td.col-coin{ white-space:nowrap !important; overflow:hidden !important; }
  /* icon↔sembol boşluğu = Puan↔Coin boşluğu (her ikisi de 6px) → EŞİT dursun.
     (coin-link margin-left zaten base'de 0!important; boşluk yalnız bu sağ margin.) */
  html.pf-simple-mode #crypto-table td.col-coin .coin-icon-wrapper{ margin-right:6px !important; }

  /* Fiyat sağa yaslı; fiyat üstte, günlük % altta (flex sütun) */
  html.pf-simple-mode #crypto-table th.col-price,
  html.pf-simple-mode #crypto-table td.col-price{ text-align:right !important; }
  html.pf-simple-mode #crypto-table td.col-price .price-main{ text-align:right !important; }
  html.pf-simple-mode #crypto-table td.col-price .price-daily-mobile{ display:block !important; text-align:right !important; }

  /* Günlük yüzde değişimi basit modda KIRMIZI/YEŞİL yazılır (artış yeşil, düşüş
     kırmızı). Sıfır/eksik değer (neu) nötr/gri kalır. Tek satır bozulmaz. */
  html.pf-simple-mode #crypto-table td.col-price .price-daily-mobile__text.pos{ color:var(--pos-mix) !important; }
  html.pf-simple-mode #crypto-table td.col-price .price-daily-mobile__text.neg{ color:var(--neg-mix) !important; }
}

/* ── BASİT MOD SADELEŞTİRME (kullanıcı isteği) ──
   1) Coin ikonu (logo + favori "+" rozeti) gizlenir → yalnız sembol metni kalır,
      sade görünüm. Hem mobil hem masaüstü basit modda geçerli.
   2) Sparkline daha az dikkat çekici: küçültülmüş sütun (yukarıda 84px) + düşük
      opaklık + azaltılmış renk doygunluğu (neon parıltı yumuşar). Sparkline yalnız
      mobil-basit'te görünür; bu kural orada etkilidir, masaüstünde zaten gizli. */
html.pf-simple-mode #crypto-table td.col-coin .coin-icon-wrapper{
  display:none !important;
}
html.pf-simple-mode #crypto-table td.col-spark .sparkline-chart{
  opacity:.92 !important;
  filter:none !important;
}

/* Coin sembolü + fiyat ilk bakışta dikkat çeksin (basit mod, mobil + masaüstü):
   kimlik (sembol) ve fiyat birincil; grafik/puan ikincil kalır. */
html.pf-simple-mode #crypto-table td.col-coin .coin-link-label{
  font-size:15px !important;
  font-weight:680 !important;
  letter-spacing:.2px !important;
}
html.pf-simple-mode #crypto-table td.col-price .price-main{
  font-size:14.5px !important;
  font-weight:660 !important;
  line-height:1.15 !important;
}

/* ── ÇOK DAR EKRAN (≤359px): 114px "30g Grafik" + geniş skor nefes payı + fiyat
   birlikte coin sembolüne yer bırakmıyordu (320px'te BTC bile kısalıyordu). Bu
   genişlikte grafik sütununu 90px'e indir → sembol tam görünür. 90px, sparkline
   çizim alt sınırının (~76px) üstünde kaldığı için grafik KIRPILMAZ. 360px ve üzeri
   ETKİLENMEZ (orada 114px zaten sığıyor). */
@media (max-width:359px){
  html.pf-simple-mode #crypto-table thead th.col-spark,
  html.pf-simple-mode #crypto-table tbody td.col-spark{
    flex:0 0 78px !important; width:78px !important; min-width:78px !important; max-width:78px !important;
  }
}

/* ==== from <style> block 6 (orig lines 17631-17722) <style id="pf-quicklist-css"> ==== */
/* ═══════════ HAZIR LİSTELER (Yükselenler / Düşenler / Hacimliler / Top) ═══════════
   Mobil: "Coinler" sekmesinin yanında kompakt ▾ → açılır liste menüsü.
   Masaüstü: "Kategoriler" tablosunun en üstünde sabit, tıklanabilir satırlar.
   Seçilince Coinler'e geçer, aktif filtreyi temizler ve TÜM tabloyu o metriğe göre sıralar. */

/* ── Mobil tetikleyici (Coinler'in yanındaki ▾) ──
   YALNIZ MOBİLDE görünür. Büyük ekranda gizli: listeler zaten Kategoriler
   tablosunda görünüyor (mobilde o satırlar gizli → tamamlayıcı). */
#tabs #pf-quicklist-toggle{
  display:none;                 /* büyük ekranda gizli */
  align-items:center; justify-content:center;
  flex:0 0 auto !important; order:0;
  width:20px; height:20px; min-height:0 !important; padding:0; margin:0 0 0 1px !important;
  border:0 !important; background:transparent !important; cursor:pointer;
  color:var(--text-color); opacity:.7; vertical-align:middle; align-self:center;
  -webkit-tap-highlight-color:transparent;
}
#tabs #pf-quicklist-toggle:hover{ opacity:1; }
#pf-quicklist-toggle .pf-ql-caret{ width:11px; height:7px; transition:transform .15s ease; }
#pf-quicklist-toggle[aria-expanded="true"] .pf-ql-caret{ transform:rotate(180deg); }
/* Yalnız mobilde göster (Kategoriler tablosundaki satırlarla tamamlayıcı, ≤700px). */
@media (max-width:700px){ #tabs #pf-quicklist-toggle{ display:inline-flex; } }
/* Güvenlik: büyük ekranda menü hiç görünmesin (mobilde açıkken yeniden boyutlanırsa). */
@media (min-width:701px){ #pf-quicklist-menu{ display:none !important; } }

/* ── Açılır menü ── */
#pf-quicklist-menu{
  position:fixed; z-index:2147483600; display:none;
  left:0; top:0; margin:0;
  min-width:210px; max-width:80vw;
  background:var(--card-bg,#fff);
  border:1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
  padding:6px;
}
#pf-quicklist-menu.is-open{ display:block; }

/* Çekmece arka karartması (yalnız mobil). */
#pf-quicklist-scrim{
  position:fixed; inset:0; z-index:2147483600;
  background:rgba(0,0,0,.42);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
#pf-quicklist-scrim.is-on{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .3s ease, visibility 0s;
}
@media (min-width:701px){ #pf-quicklist-scrim{ display:none !important; } }

/* ── MOBİL: birleşik liste alttan açılan ÇEKMECE (bottom sheet) ──
   Tam genişlik, alttan yukarı kayar, alt navigasyonun ÜSTÜNDE durur ve onunla
   çakışmaz. JS dropdown konumlandırması mobilde devre dışı (CSS yönetir). */
@media (max-width:700px){
  #pf-quicklist-menu{
    left:0 !important; right:0 !important; top:auto !important;
    bottom:0 !important;                       /* alt navı da kaplar → daha çok yükseklik */
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin:0 !important;
    border-radius:18px 18px 0 0 !important;
    border-bottom:0 !important;
    padding:0 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow:0 -16px 48px -14px rgba(0,0,0,.6) !important;
    max-height:min(82vh, calc(100dvh - 40px)) !important;
    overflow:hidden !important;                /* iç kaydırma .pf-ql-scroll'da */
    display:flex !important; flex-direction:column !important;
    visibility:hidden;
    transform:translateY(102%);
    transition:transform .32s cubic-bezier(.22,.8,.28,1), visibility 0s linear .32s;
    z-index:2147483601 !important;
    pointer-events:none;
  }
  #pf-quicklist-menu.is-open{
    visibility:visible;
    transform:translateY(0);
    transition:transform .32s cubic-bezier(.22,.8,.28,1), visibility 0s;
    pointer-events:auto;
  }
  /* Tutamaç: KAYMAZ (scroll alanı dışında) + GENİŞ kavrama alanı (28px) → kolay sürükle.
     Görünen çubuk ::before ile ortalanır; aşağı sürükleyince çekmece kapanır. */
  #pf-quicklist-menu .pf-ql-handle{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    height:28px; cursor:grab; touch-action:none;
  }
  #pf-quicklist-menu .pf-ql-handle:active{ cursor:grabbing; }
  #pf-quicklist-menu .pf-ql-handle::before{
    content:"";
    width:44px; height:5px; border-radius:999px;
    background:color-mix(in srgb, var(--text-color) 26%, transparent);
  }
  /* Kaydırılabilir içerik alanı (seçenekler burada kayar; tutamaç sabit kalır). */
  #pf-quicklist-menu .pf-ql-scroll{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  #pf-quicklist-menu .pf-ql-option{ padding:14px 12px; }
  /* "Diğer" sekme butonu mobilde gizli (basit+gelişmiş) — içeriği birleşik listede. */
  #tabs #pf-mtab-toggle{ display:none !important; }
}
/* Tutamaç yalnız mobil çekmecede görünür; masaüstü dropdown'da gizli. */
@media (min-width:701px){ #pf-quicklist-menu .pf-ql-handle{ display:none !important; } }
#pf-quicklist-menu .pf-ql-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 11px; border:0; background:transparent; color:var(--text-color);
  border-radius:8px; cursor:pointer; line-height:1.15;
}
#pf-quicklist-menu .pf-ql-option:hover,
#pf-quicklist-menu .pf-ql-option.active{
  background:color-mix(in srgb, var(--accent-color,#3b82f6) 14%, transparent);
}
#pf-quicklist-menu .pf-ql-ico{ flex:0 0 auto; width:16px; text-align:center; font-size:13px; }
#pf-quicklist-menu .pf-ql-ico.up{ color:var(--positive-color); }
#pf-quicklist-menu .pf-ql-ico.down{ color:var(--negative-color); }
#pf-quicklist-menu .pf-ql-txt{ display:flex; flex-direction:column; }
#pf-quicklist-menu .pf-ql-name{ font-weight:600; font-size:14px; }
#pf-quicklist-menu .pf-ql-desc{ font-size:11px; opacity:.62; }
/* Varsayılan "Coinler" seçeneğini presetlerden ayıran ince çizgi + vurgulu ikon. */
#pf-quicklist-menu .pf-ql-sep{ height:1px; margin:5px 9px; background:color-mix(in srgb, var(--text-color) 12%, transparent); }
#pf-quicklist-menu .pf-ql-option--default .pf-ql-ico{ color:var(--accent-color,#3b82f6); }

/* ── HAZIR-LİSTE SEKMELERİ (yalnız BASİT MOD + GENİŞ EKRAN ≥701px) ──
   Coinler sekmesinin yanına hizalı, gerçek sekme görünümünde (üst stil #tabs span'den
   gelir). Mobilde (dropdown var) ve gelişmiş modda (Kategoriler tablosu var) GİZLİ. */
#tabs .pf-ql-tab{ display:none !important; cursor:pointer; }
@media (min-width:701px){
  html.pf-simple-mode #tabs .pf-ql-tab{ display:inline-flex !important; }
}
/* Seçili hazır-liste sekmesi → accent alt çizgi (.tab.active gibi). */
#tabs .pf-ql-tab.pf-ql-on{ color:var(--text-color) !important; border-bottom-color:var(--accent-color) !important; }
/* Bir hazır-liste sekmesi seçiliyken Coinler sekmesi "seçili" görünmesin (içerik aktif
   kalsa da alt çizgisi gizlenir → segment kontrol gibi tek seçili sekme).
   YALNIZ basit+geniş (sekmelerin görünür olduğu yer) ile sınırlı: gelişmiş modda kategori
   hazır-liste satırı tıklanınca Coinler sekmesi yeniden adlandırılıp aktiflenir, orada
   .pf-ql-dim alt çizgisini gizlememeli; mobilde de dropdown adı taşır → dim uygulanmaz. */
@media (min-width:701px){
  html.pf-simple-mode #tabs #crypto-tab.pf-ql-dim.active,
  html.pf-simple-mode #tabs #crypto-tab.pf-ql-dim{ border-bottom-color:transparent !important; color:color-mix(in srgb, var(--text-color) 78%, transparent) !important; }
}

/* ── Masaüstü: Kategoriler tablosundaki hazır-liste satırları ──
   Normal kategori satırı biçiminde (cat-colN hücreleri); favorilerden hemen sonra,
   hafif vurgu + tıklanabilir. Mobilde gizli (orada dropdown var). */
#category-table .pf-quicklist-row > td{
  background:color-mix(in srgb, var(--accent-color,#3b82f6) 6%, transparent) !important;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
  cursor:pointer;
}
#category-table .pf-quicklist-row:hover > td{
  background:color-mix(in srgb, var(--accent-color,#3b82f6) 13%, transparent) !important;
}
#category-table .pf-quicklist-row .pf-ql-ico{ margin-right:5px; font-weight:700; }
#category-table .pf-quicklist-row .pf-ql-ico.up{ color:var(--positive-color); }
#category-table .pf-quicklist-row .pf-ql-ico.down{ color:var(--negative-color); }
@media (max-width:700px){ #category-table .pf-quicklist-row{ display:none !important; } }

/* ==== from <style> block 7 (orig lines 18156-18230) <style id="pf-tf-dropdown"> ==== */
/* Native select gizli model: görünmez ve tıklanamaz, value için DOM'da kalır.
   Görünürlüğü safeDisp inline display ile yönetmeye devam eder (mirror). */
#timeframe-dropdown.pf-tf-native{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important; height:1px !important;
  min-width:0 !important; max-width:none !important;
  opacity:0 !important; pointer-events:none !important; overflow:hidden !important;
}
/* Görünür tetikleyici: eski timeframe görünümü (alt çizgi + metin). 3-ID seçici,
   genel "#top-row #right-top-controls button" kurallarını ezer. */
#top-row #right-top-controls #pf-tf-trigger{
  /* display !important DEĞİL: mirror() inline display:none ile per-tab gizleyebilsin. */
  display:inline-flex;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  height:38px !important;
  padding:0 2px 4px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 16%, transparent) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:color-mix(in srgb, var(--text-color) 80%, var(--subtext-color) 20%) !important;
  font-size:12px !important;
  font-weight:560 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
#pf-tf-trigger .pf-tf-caret{
  display:none;           /* mobil: ok yok (kullanıcı isteği) */
  flex:0 0 auto;
  width:10px; height:6px;
  opacity:.7;
  transition:transform .15s ease;
}
#pf-tf-trigger.pf-open .pf-tf-caret{ transform:rotate(180deg); }
@media (min-width:701px){
  /* masaüstü: kontrol boyutu + "Diğer" chevron'u gibi ok görünür */
  #top-row #right-top-controls #pf-tf-trigger{
    font-size:14px !important;
    padding:6px 4px !important;
    gap:6px !important;
  }
  #pf-tf-trigger .pf-tf-caret{ display:block; }
}
/* Açılan menü: #pf-mtab-menu ile aynı görünüm (yuvarlak, gölge, hover, tema) */
#pf-tf-menu{
  position:fixed; z-index:2147483600; display:none;
  left:0; top:0; margin:0;
  min-width:120px; max-width:70vw; max-height:62vh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--card-bg,#fff);
  border:1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
  padding:6px;
}
#pf-tf-menu.is-open{ display:block; }
#pf-tf-menu .pf-tf-option{
  display:block; width:100%; text-align:left;
  padding:10px 12px; border:0; background:transparent;
  color:var(--text-color); font-size:14px; font-weight:560; line-height:1.2;
  border-radius:8px; cursor:pointer; white-space:nowrap;
}
#pf-tf-menu .pf-tf-option:hover,
#pf-tf-menu .pf-tf-option.active{
  background:color-mix(in srgb, var(--accent-color) 14%, transparent);
  color:var(--text-color);
}


/* ============================================================
   SADE KATEGORİ TABLOSU — MOBİL (≤700px)
   9 sütun mobilde sığmıyor + içerik "..." ile kırpılıyordu. Çözüm:
   ikon sütunları (En Çok Artan / En Çok Düşen / En Yüksek Hacim) gizlenir;
   kalan sütunlar ekrana SIĞAR (yatay kaydırma yok), uzun adlar 2 satıra
   sarar (kırpma yok). Tablet/masaüstü etkilenmez.
   ============================================================ */
@media (max-width:700px){
  #categories-content.table-wrapper,
  #category-content.table-wrapper{ overflow-x:hidden !important; }

  /* İkon sütunlarını tamamen kaldır (col + th + td). */
  #category-table .cat-col3,
  #category-table .cat-col4,
  #category-table .cat-col5{ display:none !important; }

  /* Tablo ekrana otursun (max-content/min-width scroll kuralını ezer). */
  #category-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  /* Kalan 6 sütunun oranlı genişlikleri (toplam 100%). */
  #category-table col.cat-col1{ width:35% !important; }
  #category-table col.cat-col2{ width:13% !important; }
  #category-table col.cat-col6{ width:16% !important; }
  #category-table col.cat-col9,
  #category-table col.cat-col10,
  #category-table col.cat-col11{ width:12% !important; }

  /* Gövde ilk hücresi: yatay kaydırma yok → sol-sticky/gölge gereksiz. */
  #category-table tbody td.cat-col1{
    position:static !important;
    left:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    box-shadow:none !important;
    transform:none !important;
    -webkit-transform:none !important;
    contain:none !important;
  }
  /* Başlık satırı dikey kaydırmada SABİT (sticky) kalsın — Kategori dahil tüm
     başlık hücreleri. Yatay sticky yok; yalnız üstte (top:0) sabitlenir. */
  #category-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:120 !important;
    background:var(--pf-table-head-bg) !important;
  }
  #category-table thead th.cat-col1{
    left:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    box-shadow:none !important;
    transform:none !important;
    -webkit-transform:none !important;
    contain:none !important;
  }

  /* Uzun kategori adları "..." ile kırpılmasın; 2 satıra sarsın. */
  #category-table td.cat-col1{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.2 !important;
    word-break:break-word !important;
  }

  /* Sıkışık hücrelerde nefes payı + okunur hizalama. */
  #category-table thead th,
  #category-table tbody td{ padding-left:4px !important; padding-right:4px !important; }
  #category-table th.cat-col6, #category-table td.cat-col6,
  #category-table th.cat-col9, #category-table td.cat-col9,
  #category-table th.cat-col10, #category-table td.cat-col10,
  #category-table th.cat-col11, #category-table td.cat-col11{ text-align:center !important; }
  #category-table .rf-cell .rf-pct{ min-width:0 !important; padding:2px 3px !important; }
}


/* ============================================================
   AKTİF TAB BUTONU (Coinler) — UZUN AD UYARLAMASI (mobil)
   Seçili kategori/sekme adı uzun olduğunda buton aşırı genişlemesin:
   gerekirse 2 satıra sarar ve .pf-tab-long ile yazı küçülür. Kısa adlar
   tek satır + normal boyut kalır (yalnız gerekli durumda devreye girer).
   ============================================================ */
@media (max-width:700px){
  #tabs #crypto-tab{
    white-space:normal !important;
    line-height:1.08 !important;
    max-width:52vw !important;
    text-align:center !important;
    word-break:break-word !important;
  }
  #tabs #crypto-tab.pf-tab-long{
    font-size:10.5px !important;
    letter-spacing:-0.1px !important;
  }
}

/* ============================================================
   EMTİA KARTLARI — Metaller & Enerji (Market Data sekmesi)
   Ana market-data grid'in altında ayrı bir bölüm. Kartlar
   .market-data-card temel stilini paylaşır; bölümün kendi
   grid'i içerik yüksekliğine göre (auto-rows) oturur.
   ============================================================ */
.commodity-section{
  margin-top:18px;
}
.commodity-section-title{
  margin:0 0 10px;
  padding:0 2px 8px;
  font-size:14px;
  font-weight:650;
  letter-spacing:.01em;
  color: color-mix(in srgb, var(--text-color) 90%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  scroll-margin-top:80px;
}
.commodity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
  align-items:start;
}
/* Grup aksanı: metal = amber, enerji = arduvaz/mavi */
.mdc-commodity{ border-top:2px solid transparent; }
.mdc-grp-metal { border-top-color: color-mix(in srgb, #f59e0b 60%, transparent); }
.mdc-grp-energy{ border-top-color: color-mix(in srgb, #3b82f6 55%, transparent); }

.mdc-unit{ font-size:11px; font-weight:500; color: color-mix(in srgb, var(--text-color) 55%, transparent); }

/* 7G / 30G mini değişim çipleri */
.mdc-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.mdc-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:560;
  font-variant-numeric:tabular-nums;
  background: color-mix(in srgb, var(--text-color) 6%, transparent);
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}
.mdc-chip i{
  font-style:normal;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.03em;
  opacity:.7;
}
.mdc-chip.pos{ color:var(--positive-color); background:color-mix(in srgb, var(--positive-color) 12%, transparent); }
.mdc-chip.neg{ color:var(--negative-color); background:color-mix(in srgb, var(--negative-color) 12%, transparent); }

/* Sparkline */
.mdc-spark-wrap{
  margin-top:2px;
  width:100%;
  height:34px;
  flex:0 0 auto;
}
.mdc-cspark{ display:block; width:100%; height:34px; }
.mdc-cspark polyline{ fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.mdc-cspark circle{ stroke:none; }
.mdc-cspark.pos polyline, .mdc-cspark.pos circle{ stroke:var(--positive-color); fill:var(--positive-color); }
.mdc-cspark.neg polyline, .mdc-cspark.neg circle{ stroke:var(--negative-color); fill:var(--negative-color); }

/* Aylık dip → zirve konum barı */
.mdc-range{ margin-top:auto; }
.mdc-range-track{
  position:relative;
  height:5px;
  border-radius:999px;
  background: color-mix(in srgb, var(--text-color) 12%, transparent);
}
.mdc-range-marker{
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:var(--accent-color, #3b82f6);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--card-bg) 90%, transparent);
}
.mdc-range-ends{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}

/* Altın/Gümüş oranı kartı */
.mdc-ratio{ justify-content:flex-start; }
.mdc-ratio-big{
  font-size:34px;
  font-weight:680;
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  margin-top:4px;
  color: color-mix(in srgb, #f59e0b 75%, var(--text-color));
}
.mdc-ratio-sub{
  font-size:12px;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}
.mdc-ratio-sub b{ font-weight:650; color: color-mix(in srgb, var(--text-color) 92%, transparent); }
.mdc-ratio-prices{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  color: color-mix(in srgb, var(--text-color) 62%, transparent);
}

/* Performans karşılaştırma tablosu */
.mdc-compare-wrap{ overflow-x:auto; margin-top:2px; }
.mdc-compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.mdc-compare-table th,
.mdc-compare-table td{
  padding:5px 8px;
  text-align:right;
  white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
.mdc-compare-table thead th{
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.03em;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
  text-transform:uppercase;
}
.mdc-compare-table tbody th{
  text-align:left;
  font-weight:560;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
}
.mdc-compare-table td.pos{ color:var(--positive-color); }
.mdc-compare-table td.neg{ color:var(--negative-color); }
.mdc-compare-table td.neu{ color: color-mix(in srgb, var(--text-color) 60%, transparent); }
.mdc-compare-table tbody tr:last-child th,
.mdc-compare-table tbody tr:last-child td{ border-bottom:0; }

/* Şeritten gelindiğinde kısa highlight animasyonu */
.commodity-section.commodity-flash .commodity-section-title{
  animation: pfCommodityFlash 1.5s ease;
}
.commodity-section.commodity-flash .commodity-grid > .market-data-card{
  animation: pfCommodityCardFlash 1.5s ease;
}
@keyframes pfCommodityFlash{
  0%   { background: color-mix(in srgb, var(--accent-color, #3b82f6) 22%, transparent); }
  100% { background: transparent; }
}
@keyframes pfCommodityCardFlash{
  0%   { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, #3b82f6) 55%, transparent); }
  100% { box-shadow: 0 1px 0 color-mix(in srgb, var(--text-color) 4%, transparent); }
}
@media (prefers-reduced-motion: reduce){
  .commodity-section.commodity-flash .commodity-section-title,
  .commodity-section.commodity-flash .commodity-grid > .market-data-card{ animation:none; }
}


/* ══ Coinler sekmesi kategori/liste adıyla aktifken — geri ok (yeni id/sınıf) ══ */
#tabs #crypto-tab.pf-cat-on{
  color:var(--text-color) !important;
  border-bottom:2px solid var(--accent-color) !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}
#tabs #crypto-tab.pf-cat-on::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  margin-right:6px;
  background-color:currentColor;
  opacity:.7;
  transition:opacity .15s ease, filter .15s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#tabs #crypto-tab.pf-cat-on:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 3px currentColor);
}


/* ── Mobil: mdc kart chip'leri tek satıra sığsın (sarma/scroll/ellipsis yok).
   Sığmazsa dikey: dönem (1G/30G) üstte, yüzde altta. Dosya sonunda → diğer
   .mdc-chip kurallarını ezer. ── */
@media (max-width:600px){
  .mdc-chips{ flex-wrap:nowrap !important; gap:4px !important; justify-content:center !important; }
  .mdc-chip{
    flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:0 !important; padding:2px 5px !important; line-height:1.08 !important; min-width:0 !important;
  }
  .mdc-chip i{ font-size:8px !important; opacity:.55 !important; }

  /* Ratio kartları (Altın/Gümüş, Petrol/Gaz, çapraz kur): iç kısımlar mobilde
     taşmasın — fiyatlar alt alta, boyutlar küçült. */
  .mdc-ratio-big{ font-size:23px !important; margin-top:2px !important; }
  .mdc-ratio-sub{ font-size:10.5px !important; line-height:1.25 !important; }
  .mdc-ratio-prices{
    flex-direction:column !important; justify-content:flex-start !important;
    align-items:flex-start !important; gap:1px !important; font-size:10px !important;
  }

  /* Kart grid'i mobilde içeriğe göre büyüsün — sabit yükseklik içeriği taşırmasın
     (ratio, makro ve emtia kartlarının hepsi .commodity-grid içinde). */
  .commodity-section .commodity-grid{ grid-auto-rows:minmax(112px, auto) !important; }

  /* Makro ülke kartı: ad tek satır, enflasyon% + yıl başlığın sağında; kompakt. */
  .mdc-country .mdc-head{ flex-direction:row !important; align-items:baseline !important; justify-content:space-between !important; gap:8px !important; }
  .mdc-country .mdc-name{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .mdc-country .macro-big{ font-size:14px !important; }
  .mdc-country .macro-big i{ font-size:8.5px !important; }
  .mdc-country .macro-sub{ margin-top:2px !important; padding-top:3px !important; }
  .mdc-country .macro-sub-lbl{ font-size:10px !important; }
  .mdc-country .macro-sub-val{ font-size:11px !important; }
  .mdc-country .macro-sub-val i{ font-size:8.5px !important; }
}