/* ============================================
   Modüller Sayfası (moduller.css)
   ============================================ */

.module-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom: 28px;
}
.filter-btn{
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-800);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 800;
  transition: var(--transition-fast);
}
.filter-btn:hover{ border-color: var(--goem-yellow); color: var(--goem-yellow-dark); }
.filter-btn.active{
  background: var(--goem-blue);
  border-color: var(--goem-blue);
  color: var(--white);
}

.module-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.module-item{
  position:relative;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  overflow:hidden;
}
.module-item:hover{ transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: rgba(247,181,0,.6); }
.module-item .badge-cat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: .8rem;
  font-weight: 900;
  margin-bottom: 14px;
}
.badge-green{ background: rgba(76,175,80,.12); color: var(--cat-green); }
.badge-orange{ background: rgba(255,152,0,.12); color: var(--cat-orange); }
.badge-purple{ background: rgba(156,39,176,.12); color: var(--cat-purple); }
.badge-blue{ background: rgba(21,101,192,.12); color: var(--goem-blue); }

.module-item h5{ font-weight: 900; margin-bottom: 10px; }
.module-item p{ margin:0; color: var(--gray-600); }