/* ============ HORIZONTAL CATEGORY BAR (modern, brand-aligned) ============ */
/* Yatay scroll + hover'da alt-kategoriler dropdown'ı.
   Pill stilinde item'lar, gradient fade kenarlar, accent active state.
   Sticky: header'ın hemen altına yapışır (top:62px), sticky-toolbar onun altına. */
.cat-bar{
  position:sticky;
  top:62px;            /* header yüksekliği */
  z-index:24;          /* header (30) altında, sticky-toolbar (25) seviyesinde */
  margin:10px 0 6px;
  padding:6px 0;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);
  border:none;
  overflow:visible;
  transition:padding .15s, box-shadow .15s;
}
/* Scroll ile yapışınca alt gölge ve daha sıkı padding */
.cat-bar.is-stuck{
  padding:8px 0;
  box-shadow:0 1px 0 var(--line), 0 4px 12px rgba(0,0,0,.16);
}

/* Sol/sağ scroll butonları — yuvarlak, minimal */
.cat-bar-arrow{
  flex:0 0 auto;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,opacity .2s,transform .15s;
  z-index:3;flex-shrink:0;
}
.cat-bar-arrow:hover:not(:disabled){
  background:var(--accent);color:var(--bg);border-color:var(--accent);
  transform:scale(1.05);
}
.cat-bar-arrow:disabled{
  opacity:.25;cursor:default;background:transparent;
}
.cat-bar-arrow svg{width:16px;height:16px;stroke-width:2.5}

/* Kayan track + gradient fade kenarları */
.cat-bar-track{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 0;
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cat-bar-track::-webkit-scrollbar{display:none}

/* Her kategori item'ı — pill */
.cat-bar-item{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 16px;
  font-family:inherit;font-size:13px;font-weight:500;
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.cat-bar-item:hover{
  background:var(--surface-2);color:var(--ink);
  border-color:var(--line-strong);
}
.cat-bar-item.active{
  background:var(--accent);color:var(--bg);
  border-color:var(--accent);font-weight:600;
}
.cat-bar-item.active .chev{opacity:1}
/* "All" item'ı — özel vurgu */
.cat-bar-item.cat-bar-all{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;
}
.cat-bar-item .chev{
  width:11px;height:11px;opacity:.55;flex-shrink:0;
  transition:transform .15s, opacity .15s;
}
.cat-bar-item:hover .chev{opacity:.9;transform:translateY(1px)}

/* Dropdown — fixed position */
.cat-bar-dropdown{
  position:fixed;top:0;left:0;
  min-width:240px;max-width:340px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  padding:6px;
  display:none;z-index:200;
  max-height:64vh;overflow-y:auto;
  animation:catBarFadeIn .12s ease-out;
}
@keyframes catBarFadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.cat-bar-dropdown.open{display:block}
.cat-bar-dropdown a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border-radius:8px;
  font-size:13px;color:var(--ink-soft);
  text-decoration:none;cursor:pointer;
  transition:background .12s,color .12s;
}
.cat-bar-dropdown a:hover{background:var(--surface-2);color:var(--ink)}
.cat-bar-dropdown a.active{color:var(--accent);background:rgba(212,255,62,.1)}
.cat-bar-dropdown .dd-all{
  font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
  margin:0 0 4px;padding-bottom:10px;
  border-radius:8px 8px 0 0;
}
.cat-bar-dropdown .num{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink-dim);
  padding:1px 7px;border-radius:4px;background:var(--bg-2);
  min-width:22px;text-align:center;font-weight:500;
}
.cat-bar-dropdown a.active .num{color:var(--accent);background:rgba(212,255,62,.12)}
.cat-bar-dropdown::-webkit-scrollbar{width:6px}
.cat-bar-dropdown::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* Light theme uyumu */
[data-theme="light"] .cat-bar-item.active,
body[data-theme="light"] .cat-bar-item.active{color:#1a1a1a}
[data-theme="light"] .cat-bar-arrow:hover:not(:disabled),
body[data-theme="light"] .cat-bar-arrow:hover:not(:disabled){color:#1a1a1a}
[data-theme="light"] .cat-bar-dropdown,
body[data-theme="light"] .cat-bar-dropdown{
  box-shadow:0 10px 32px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
}

/* ── RESPONSIVE ── */
@media (max-width: 960px){
  .cat-bar{margin:10px 0 18px;gap:6px;top:62px}
  .cat-bar-item{padding:8px 13px;font-size:12.5px}
  .cat-bar-arrow{width:32px;height:32px}
  .cat-bar-arrow svg{width:14px;height:14px}
}
@media (max-width: 640px){
  .cat-bar{margin:8px 0 14px;gap:0;top:58px;padding:6px 0}
  .cat-bar-arrow{display:none}
  .cat-bar-track{
    gap:6px;padding:0 4px;
    mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .cat-bar-item{padding:7px 12px;font-size:12px}
  .cat-bar-dropdown{max-width:calc(100vw - 16px);min-width:0}
}