/* ═══════════════════════════════════════════════════════════════════════════
   pf-context-menu.css — ORTAK SAĞ-TIK MENÜ TASARIMI
   ─────────────────────────────────────────────────────────────────────────
   Anasayfa (kategori.css) .pf-ctx-* görünümünün tek dosyada, taşınabilir
   sürümü. Amaç: coinsayfasi (coinphp.php) ve radar.php menülerinin de
   anasayfadaki menüyle BİREBİR aynı görsel dili kullanması.

   Tema tokenları sayfadan sayfaya farklı adlanabildiği için hepsi fallback
   zinciriyle çözülür:
     --card-bg / --pf-card-bg / --pf-panel-bg
     --text-color / --pf-text-color
     --accent-color / --pf-primary-color
     --positive-color / --pf-up-color
     --negative-color / --pf-down-color
   Anasayfada kategori.css zaten bu sınıfları tanımlar; orada bu dosya
   YÜKLENMEZ (çakışma olmaz) — yalnız coin sayfası ve radar yükler.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-ctx-menu{
  /* Yerel değişkenler: sayfa hangi token setini kullanıyorsa ona düşer */
  --pfx-card: var(--card-bg, var(--pf-card-bg, var(--pf-panel-bg, #fff)));
  --pfx-text: var(--text-color, var(--pf-text-color, #0f1722));
  --pfx-accent: var(--accent-color, var(--pf-primary-color, #3b82f6));
  --pfx-pos: var(--positive-color, var(--pf-up-color, #16a34a));
  --pfx-neg: var(--negative-color, var(--pf-down-color, #dc2626));

  position:fixed;
  left:0; top:0;
  z-index:2147483601;
  min-width:214px;
  max-width:88vw;
  background:var(--pfx-card);
  color:var(--pfx-text);
  border:1px solid color-mix(in srgb, var(--pfx-text) 12%, transparent);
  border-radius:12px;
  box-shadow:0 18px 46px -14px rgba(0,0,0,.5);
  padding:6px;
  font-family:inherit;
  opacity:0;
  transform:translateY(-4px) scale(.985);
  transform-origin:top left;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  /* Mobil: uzun basışta metin seçimi / tarayıcı callout menüsü çıkmasın */
  -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
.pf-ctx-menu.is-open{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* — Başlık (coin ikonu + sembol) — */
.pf-ctx-head{
  display:flex; align-items:center; gap:8px;
  padding:5px 10px 9px;
  margin:0 0 4px;
  border-bottom:1px solid color-mix(in srgb, var(--pfx-text) 10%, transparent);
}
.pf-ctx-head img{
  width:20px; height:20px; border-radius:50%;
  object-fit:cover; flex:0 0 auto;
  background:color-mix(in srgb, var(--pfx-text) 6%, transparent);
}
.pf-ctx-head .pf-ctx-sym{ font-weight:700; font-size:13.5px; letter-spacing:.2px; }
/* Başlıkta sağa yaslı ikincil bilgi (ör. güncel fiyat) */
.pf-ctx-head .pf-ctx-head-sub{
  margin-left:auto; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--pfx-text) 62%, transparent);
  white-space:nowrap;
}

/* — Menü satırı — */
.pf-ctx-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  background:transparent;
  color:var(--pfx-text);
  font-family:inherit;
  font-size:14px;
  font-weight:560;
  line-height:1.2;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
}
.pf-ctx-item:hover,
.pf-ctx-item.is-active{
  background:color-mix(in srgb, var(--pfx-accent) 14%, transparent);
}
.pf-ctx-item .pf-ctx-ico{
  flex:0 0 18px; width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pfx-accent);
}
.pf-ctx-item .pf-ctx-ico svg{ width:18px; height:18px; display:block; }
.pf-ctx-item .pf-ctx-ico i{ font-size:14px; line-height:1; } /* FontAwesome ikon uyumu */
.pf-ctx-item .pf-ctx-label{
  flex:1 1 auto; overflow:hidden; text-overflow:ellipsis;
}
.pf-ctx-item.is-fav-on .pf-ctx-ico{ color:#f5a623; }
.pf-ctx-item .pf-ctx-caret{
  flex:0 0 auto; margin-left:6px; opacity:.5; font-size:16px; line-height:1;
}

/* — Ayraç — */
.pf-ctx-sep{
  height:1px; margin:5px 6px;
  background:color-mix(in srgb, var(--pfx-text) 10%, transparent);
}

/* — Alt menü — */
.pf-ctx-submenu{ min-width:224px; }
.pf-ctx-sub-title{
  padding:6px 10px 5px;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--pfx-text) 55%, transparent);
}
.pf-ctx-sub-list{ max-height:min(620px, calc(100vh - 120px)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pf-ctx-sub-empty{ padding:10px 12px; font-size:13px; opacity:.7; }

/* — Onay işareti (listede var mı) — */
.pf-ctx-check{
  flex:0 0 16px; width:16px; height:16px; margin-left:6px;
  color:var(--pfx-pos); opacity:0;
}
.pf-ctx-check svg{ width:16px; height:16px; display:block; }
.pf-ctx-item.is-on .pf-ctx-check{ opacity:1; }
.pf-ctx-item.is-on{ background:color-mix(in srgb, var(--pfx-pos) 12%, transparent); }
.pf-ctx-item.is-on .pf-ctx-ico{ color:var(--pfx-pos); }

/* — Tehlikeli/yıkıcı işlem (ör. gizle) — */
.pf-ctx-item.is-danger,
.pf-ctx-item.pf-ctx-danger{ color:var(--pfx-neg); }
.pf-ctx-item.is-danger .pf-ctx-ico,
.pf-ctx-item.pf-ctx-danger .pf-ctx-ico{ color:var(--pfx-neg); }
.pf-ctx-item.is-danger:hover,
.pf-ctx-item.pf-ctx-danger:hover{ background:color-mix(in srgb, var(--pfx-neg) 14%, transparent); }

/* — Satır içi giriş (yeni liste / özel fiyat) — */
.pf-ctx-newrow{ display:flex; gap:6px; padding:6px; }
.pf-ctx-newrow input{
  flex:1 1 auto; min-width:0;
  padding:8px 10px; font-size:13.5px; font-family:inherit;
  border:1px solid color-mix(in srgb, var(--pfx-text) 18%, transparent);
  border-radius:8px;
  background:var(--pfx-card); color:var(--pfx-text);
  outline:none;
}
.pf-ctx-newrow input:focus{
  border-color:color-mix(in srgb, var(--pfx-accent) 60%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pfx-accent) 16%, transparent);
}
.pf-ctx-newrow button{
  flex:0 0 auto; padding:8px 13px; font-size:13px; font-weight:600; font-family:inherit;
  border:0; border-radius:8px; cursor:pointer;
  background:var(--pfx-accent); color:#fff;
}
.pf-ctx-newrow button:hover{ filter:brightness(1.05); }

/* — Hızlı alarm seviyeleri (yön renkli + sağa yaslı fiyat) — */
.pf-ctx-alarm-lvl.is-up .pf-ctx-ico,
.pf-ctx-alarm-lvl.is-up .pf-ctx-label{ color:var(--pfx-pos); }
.pf-ctx-alarm-lvl.is-down .pf-ctx-ico,
.pf-ctx-alarm-lvl.is-down .pf-ctx-label{ color:var(--pfx-neg); }
.pf-ctx-alarm-lvl .pf-ctx-label{ flex:0 0 auto; font-variant-numeric:tabular-nums; }
.pf-ctx-alarm-lvl .pf-ctx-alarm-price{
  margin-left:auto;
  padding-left:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--pfx-text);
  opacity:.9;
  white-space:nowrap;
}
.pf-ctx-alarm-lvl.is-up:hover{ background:color-mix(in srgb, var(--pfx-pos) 12%, transparent); }
.pf-ctx-alarm-lvl.is-down:hover{ background:color-mix(in srgb, var(--pfx-neg) 12%, transparent); }

/* Kurulu (tekrar tıkla → iptal) durumundaki satır: vurgulu */
.pf-ctx-item.is-set{ background:color-mix(in srgb, var(--pfx-accent) 12%, transparent); }
.pf-ctx-item.is-set .pf-ctx-ico,
.pf-ctx-item.is-set .pf-ctx-alarm-price{ color:var(--pfx-accent); font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════════════
   Anasayfa coin menüsünün EK bileşenleri (pf-coin-menu.js başka sayfada da
   çağrılabildiği için tasarım burada tek kaynakta toplanır).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Kategoriler alt menüsü: kategorideki coin sayısı rozeti — */
.pf-ctx-item .pf-ctx-cat-n{
  flex:0 0 auto; margin-left:8px;
  font-size:11px; font-weight:700; line-height:1;
  padding:3px 7px; border-radius:999px;
  color:color-mix(in srgb, var(--pfx-text) 60%, transparent);
  background:color-mix(in srgb, var(--pfx-text) 8%, transparent);
}
.pf-ctx-item .pf-ctx-ico .pf-delist-badge,
.pf-ctx-item .pf-ctx-ico .pf-alpha-badge,
.pf-ctx-item .pf-ctx-ico .pf-infl-badge,
.pf-ctx-item .pf-ctx-ico .pf-parity-badge{ margin:0; }
.pf-ctx-item.pf-ctx-badge-row:hover,
.pf-ctx-item.pf-ctx-badge-row.is-active{
  background:color-mix(in srgb, var(--pf-ctx-badge-c, var(--pfx-accent)) 16%, transparent);
}
.pf-ctx-item.pf-ctx-badge-row .pf-ctx-cat-n{
  color:color-mix(in srgb, var(--pf-ctx-badge-c, var(--pfx-text)) 80%, var(--pfx-text));
  background:color-mix(in srgb, var(--pf-ctx-badge-c, var(--pfx-text)) 12%, transparent);
}

/* — PRV Alt / PRV Üst: tek satırda iki kart — */
.pf-ctx-prv-row{ display:flex; gap:6px; align-items:stretch; padding:0 2px; }
.pf-ctx-item.pf-ctx-prv-half{
  flex:1 1 0; width:auto; min-width:0;
  flex-direction:column; align-items:flex-start; gap:5px;
  padding:10px 11px; text-align:left; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--pfx-text) 9%, transparent);
  border-radius:10px;
}
.pf-ctx-prv-head{ display:flex; align-items:center; gap:6px; min-width:0; }
.pf-ctx-prv-ico{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; }
.pf-ctx-prv-ico svg{ width:18px; height:18px; display:block; }
.pf-ctx-prv-label{ font-size:14px; font-weight:560; font-variant-numeric:tabular-nums; line-height:1.2; }
.pf-ctx-prv-price{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--pfx-text); opacity:.9; line-height:1.2; }
.pf-ctx-prv-pct{ font-size:14px; font-weight:560; font-variant-numeric:tabular-nums; line-height:1.2; }
.pf-ctx-prv-half.is-up  .pf-ctx-prv-ico,
.pf-ctx-prv-half.is-up  .pf-ctx-prv-label,
.pf-ctx-prv-half.is-up  .pf-ctx-prv-pct{ color:var(--pfx-pos); }
.pf-ctx-prv-half.is-down .pf-ctx-prv-ico,
.pf-ctx-prv-half.is-down .pf-ctx-prv-label,
.pf-ctx-prv-half.is-down .pf-ctx-prv-pct{ color:var(--pfx-neg); }
.pf-ctx-prv-half.is-up:hover{ background:color-mix(in srgb, var(--pfx-pos) 12%, transparent); }
.pf-ctx-prv-half.is-down:hover{ background:color-mix(in srgb, var(--pfx-neg) 12%, transparent); }
.pf-ctx-prv-half.is-set{ opacity:.55; }
.pf-ctx-prv-half.is-set:hover{ opacity:1; background:color-mix(in srgb, var(--pfx-neg) 14%, transparent); }
.pf-ctx-prv-cancel{ display:none; font-size:13px; font-weight:600; line-height:1.2; color:var(--pfx-neg); }
.pf-ctx-prv-half.is-set:hover .pf-ctx-prv-cancel{ display:block; }
.pf-ctx-prv-half.is-set:hover .pf-ctx-prv-price,
.pf-ctx-prv-half.is-set:hover .pf-ctx-prv-pct{ display:none; }

/* — Menünün kendi toast'ı (pf-coin-menu.js) — */
.pf-ctx-toast{
  --pfx-card: var(--card-bg, var(--pf-card-bg, var(--pf-panel-bg, #fff)));
  --pfx-text: var(--text-color, var(--pf-text-color, #0f1722));
  --pfx-accent: var(--accent-color, var(--pf-primary-color, #3b82f6));
  --pfx-pos: var(--positive-color, var(--pf-up-color, #16a34a));
  --pfx-neg: var(--negative-color, var(--pf-down-color, #dc2626));
  position:fixed; left:50%; bottom:28px;
  transform:translateX(-50%) translateY(12px);
  z-index:2147483602;
  display:flex; align-items:center; gap:9px;
  max-width:90vw;
  padding:11px 16px;
  background:var(--pfx-card); color:var(--pfx-text);
  border:1px solid color-mix(in srgb, var(--pfx-text) 14%, transparent);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.55);
  border-radius:12px;
  font-family:inherit; font-size:13.5px; font-weight:560;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.pf-ctx-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
.pf-ctx-toast .pf-ctx-toast-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--pfx-accent); flex:0 0 auto;
}
.pf-ctx-toast.is-ok .pf-ctx-toast-dot{ background:var(--pfx-pos); }
.pf-ctx-toast.is-warn .pf-ctx-toast-dot{ background:var(--pfx-neg); }