/* ============================================================
   Mechanimix — Process System pages
   Shared styles for /urunler/proses-tesis-ve-ekipmanlari/*
   ============================================================ */

/* İlgili Sektörler --------------------------------------------- */
.related-sectors{padding:64px 0}
.related-sectors h3{font-family:var(--font-heading);font-size:1.1rem;color:var(--navy);margin-bottom:20px;letter-spacing:.3px}
.sector-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sector-badge{display:inline-block;padding:8px 18px;border-radius:100px;background:var(--navy);color:var(--white);font-size:.82rem;font-weight:500;transition:all .3s;border:1px solid var(--navy)}
.sector-badge:hover{background:var(--orange);border-color:var(--orange);color:var(--white);transform:translateY(-2px)}

/* Component cards (sistem bileşenleri) ------------------------- */
.components .cat-card{background:var(--white);position:relative}
.components .cat-card .cat-card-body{padding:28px}
.component-code{display:inline-block;background:var(--orange-light);color:var(--orange);padding:4px 10px;border-radius:6px;font-family:var(--font-heading);font-size:.68rem;font-weight:700;letter-spacing:.5px;margin-bottom:10px}

/* Landing page sector filter pill badges on cards -------------- */
.sector-pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.sector-pill{font-size:.7rem;color:var(--orange);background:var(--orange-light);padding:3px 10px;border-radius:100px;font-weight:600;text-transform:capitalize}

/* Hide cards when filtered out (landing) ----------------------- */
.cat-card.is-hidden{display:none}

/* Applications grid responsive --------------------------------- */
@media(max-width:1024px){
  .applications .app-grid{grid-template-columns:repeat(2,1fr) !important}
  .components .cat-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:640px){
  .applications .app-grid{grid-template-columns:1fr !important}
  .components .cat-grid{grid-template-columns:1fr !important}
  .related-sectors{padding:40px 0}
}