/* ==========================================================================
   pixepi — katalog.css  ·  yalnızca /araclar ve /kategoriler için ince ayar
   --------------------------------------------------------------------------
   site.css envanteri DEĞİŞTİRİLMEZ; burada yalnızca:
     (a) site.js katalog sözleşmesinin zorunlu kıldığı tek kural,
     (b) iki sayfaya özel yerleşim boşlukları,
     (c) sıralama kutusunun yerleşik oku (satır içi SVG; harici dosya yok),
     (d) uzun kart alt satırının taşma davranışı.
   Yeni bileşen yok; renkler site.css token'larından gelir.
   ========================================================================== */

/* --- 1. site.js sözleşmesi ----------------------------------------------
   Filtre uygulanınca site.js kartlara [hidden] verir. .tool-card{display:flex}
   tarayıcının [hidden]{display:none} kuralını ezdiği için gizleme kuralı
   site.css'te kanoniktir ([hidden]{display:none!important}); burada
   tekrar tanımlanmaz. */

/* --- 2. Katalog akışı yerleşimi -----------------------------------------
   page-head → arama/sıralama → chip şeridi → sayaç → grid → boş durum → sayfalama */
[data-catalog].section--tight{padding-top:40px}
.catalog-bar + .chip-row{margin-top:16px}
[data-catalog] .result-note{margin-top:22px}
[data-catalog] .tool-grid{margin-top:10px}
[data-catalog] .empty{margin-top:10px}
[data-catalog] .pager{margin-top:38px}

/* --- 3. Sıralama kutusu: yerleşik ok ------------------------------------- */
.select{
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0bd' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

/* --- 4. Sayfa başlığındaki küçük not ------------------------------------ */
.page-head .small.muted{display:block;max-width:680px;margin-top:12px}

/* --- 5. Araç kartı alt satırı: adres taşmasın, kategori etiketi kırpılmasın */
.tool-card .tool-foot{min-width:0}
.tool-foot .cat-tag{flex:none}
.tool-foot .nowrap{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* --- 6. Sayfalama: ok hizası -------------------------------------------- */
.pager a{gap:8px}
.pager svg{width:16px;height:16px;flex:none}

/* --- 7. Katalog bölüm başlıkları ----------------------------------------
   Varsayılan görünüm: üstte yayındaki araçlar, altta "Yakında" yol haritası.
   Filtreli görünümlerde bu başlıklar çizilmez (tek ızgara). */
.catalog-group{margin-top:6px}
.catalog-group--soon{margin-top:46px;padding-top:32px;border-top:1px solid var(--line)}
.catalog-group-title{
  display:flex;align-items:baseline;gap:10px;
  font-size:16px;font-weight:600;line-height:1.2;color:var(--body);
}
.catalog-group-note{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);
}
.catalog-group-lead{margin-top:8px;max-width:640px;font-size:13.5px;line-height:1.6;color:var(--muted-2)}
.catalog-group .tool-grid{margin-top:16px}

/* --- 8. Yol haritası satırları (planlı araçlar, kompakt) ---------------- */
.roadmap-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.roadmap-row{
  --accent:#7c8aa5;--accent-rgb:124,138,165;
  display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#0b1320;
  transition:border-color .16s,background .16s;
}
.roadmap-row:hover{border-color:rgba(var(--accent-rgb),.38);background:#0d1621}
.roadmap-icon{
  display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;
  border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.1);color:var(--accent);
}
.roadmap-icon svg{width:16px;height:16px}
.roadmap-name{font-size:14.5px;font-weight:600;color:var(--body);white-space:nowrap}
.roadmap-desc{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:var(--muted-2);
}
.roadmap-row .cat-tag{margin-left:auto;flex:none}

/* --- 9. Kategori dizini (kompakt çipler) -------------------------------- */
.cat-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cat-index--soon{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cat-pill{
  --accent:#7c8aa5;--accent-rgb:124,138,165;
  position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;min-width:0;
  padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(160deg,#0e1621cc,#0a111dcc);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.cat-pill:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(160px 80px at 0% 0%,rgba(var(--accent-rgb),.16),transparent 72%);
}
.cat-pill:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.5);box-shadow:var(--shadow-card)}
.cat-pill-icon{
  display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  border:1px solid rgba(var(--accent-rgb),.34);background:rgba(var(--accent-rgb),.13);color:var(--accent);
}
.cat-pill-icon svg{width:19px;height:19px}
.cat-pill-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-pill-name{font-size:15px;font-weight:600;color:var(--body)}
.cat-pill-count{font-size:12.5px;color:var(--muted-2)}
.cat-pill--soon{opacity:.9}
.cat-pill--soon .cat-pill-icon{color:var(--muted-2);border-color:#2a3750;background:#111a2a}
.cat-soon{margin-top:46px}

@media (max-width:980px){
  .cat-index,.cat-index--soon{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .roadmap-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cat-index,.cat-index--soon{grid-template-columns:1fr}
  .roadmap-desc{display:none}
}